/* =========================================================
   EMBEDDED FONTS
   ========================================================= */
@font-face {
  font-family: 'FrankRuhl-EPUB';
  src: url('/fonts/FrankRuhlLibre-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FrankRuhl-EPUB';
  src: url('/fonts/FrankRuhlLibre-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'LibreBaskerville-EPUB';
  src: url('/fonts/LibreBaskerville-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-premium: 'FrankRuhl-EPUB', serif;

    --primary-color: #0f4c81;
    /* Classic Blue */
    --primary-light: #e6f0fa;
    --secondary-color: #8c9b3d;
    /* Olive Green */
    --secondary-light: #f4f7e6;

    --bg-color: #ffffff;
    --sidebar-bg: rgba(255, 255, 255, 0.95);
    --panel-bg: #ffffff;
    --header-bg: #ffffff;

    --border-color: #e2e8f0;
    --highlight-color: #fbbf24;
    --warning-bg: #fffbe6;
    --warning-border: #ffe58f;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-bright: #1e293b;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.5);
    --backdrop-blur: 12px;

    --transition-speed: 0.2s;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 9999px;

    --bg-secondary: #f8f9fa;
    --bg-sidebar: #f8fafc;
    --bg-card: #ffffff;
    --bg-hover: #f1f5f9;
    --bg-tertiary: #f1f5f9;
    --bg-primary: #ffffff;
    --text-color: #1e293b;
    --card-bg: #ffffff;

    /* Spacing System */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Tab Colors */
    --bg-tab-active: #e0e0e0;
    --bg-tab-inactive: transparent;

    /* Semantic backgrounds */
    --bg-app: #f8fafc;
    --bg-panel: #ffffff;
    --bg-header: #ffffff;
    --bg-input: #ffffff;
    --bg-viewer: #f8f9fa;
    --bg-viewer-page: #ffffff;

    /* Status badges */
    --status-pending-bg: #f8f9fa;
    --status-pending-text: #64748b;
    --status-pending-border: #e2e8f0;

    --status-running-bg: #e0f2fe;
    --status-running-text: #0369a1;
    --status-running-border: #bae6fd;

    --status-completed-bg: #dcfce7;
    --status-completed-text: #166534;
    --status-completed-border: #bbf7d0;

    --status-failed-bg: #fee2e2;
    --status-failed-text: #991b1b;
    --status-failed-border: #fecaca;

    /* Publication Packages badges */
    --package-digitized-bg: #e0f2fe;
    --package-digitized-text: #0369a1;
    --package-digitized-border: #bae6fd;

    --package-annotated-bg: #dcfce7;
    --package-annotated-text: #166534;
    --package-annotated-border: #bbf7d0;

    --package-translated-bg: #f3e8ff;
    --package-translated-text: #6b21a8;
    --package-translated-border: #e9d5ff;

    /* Legacy stage badges (deprecated aliases) */
    --stage-digitized-bg: var(--package-digitized-bg);
    --stage-digitized-text: var(--package-digitized-text);
    --stage-digitized-border: var(--package-digitized-border);

    --stage-annotated-bg: var(--package-annotated-bg);
    --stage-annotated-text: var(--package-annotated-text);
    --stage-annotated-border: var(--package-annotated-border);

    --stage-translated-bg: var(--package-translated-bg);
    --stage-translated-text: var(--package-translated-text);
    --stage-translated-border: var(--package-translated-border);

    /* Log Colors */
    --log-user: #60a5fa;
    --log-gemini: #c084fc;
    --log-thoughts: #94a3b8;
    --log-error: #ef4444;
    --log-success: #22c55e;
    --log-warning: #f59e0b;

    /* Annotation Colors */
    --anno-place: #bf5452;
    --anno-name: #f59e0b;
    --anno-ocr: #3d8c87;
    --anno-note: #7a668f;

    /* Section Backgrounds */
    --bg-section-upload: #525659;
    --bg-section-border: #eee;

    /* Source / Code View Colors (Light Mode) */
    --bg-src: #ffffff;
    --text-src: #24292e;
    --stx-line-num: #959da5;
    --stx-line-num-border: #e1e4e8;
    --stx-bracket: #d73a49;
    /* Red for brackets */
    --stx-tag: #22863a;
    /* Green for tags */
    --stx-attr: #6f42c1;
    /* Purple for attributes */
    --stx-val: #005cc5;
    /* Blue for values */
    --stx-comment: #6a737d;
    /* Gray for comments */
    --stx-css-selector: #808000;
    /* Olive */
    --stx-css-property: #008000;
    /* Green */
    --stx-css-value: #0000ff;
    /* Blue */
    --stx-css-string: #ff00ff;
    /* Pink/Magenta */
    --stx-css-comment: #808080;
    /* Gray */
    --job-indicator-bg: #ffffff;
    --job-indicator-text: #1e293b;
    --job-indicator-border: #e2e8f0;
    --job-indicator-spinner: var(--primary-color);

    /* Scrollbar Variables */
    --scrollbar-thumb: #718096;
    --scrollbar-thumb-hover: #4a5568;
    --scrollbar-track: rgba(0, 0, 0, 0.01);
}

/* Validation System */
.validation-banner {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 32px;
    font-size: 0.85rem;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    animation: slide-down 0.3s ease-out;
    z-index: 10;
    position: relative;
    box-sizing: border-box;
}

.validation-banner.error {
    background: var(--status-failed-bg);
    color: var(--status-failed-text);
    border-color: var(--status-failed-border);
}

.validation-banner.warning {
    background: var(--status-running-bg);
    color: var(--status-running-text);
    border-color: var(--status-running-border);
}

.validation-banner .btn-text-small {
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
    padding: 2px 4px;
}

@keyframes slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Markers inside Editor / Source view */
.src-line.has-validation-error {
    background-color: rgba(200, 0, 0, 0.15);
}

.src-line.has-validation-warning {
    background-color: rgba(230, 162, 60, 0.15);
}

/* Banner Navigation */
.validation-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    padding: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.dark-mode .validation-nav {
    background: rgba(0, 0, 0, 0.2);
}

.btn-nav-small {
    background: none;
    border: none;
    color: inherit;
    padding: 2px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    opacity: 0.8;
}

.btn-nav-small:hover {
    background: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.dark-mode .btn-nav-small:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-nav-small svg {
    width: 14px;
    height: 14px;
    stroke-width: 3px;
    /* Thicker for better visibility in banner */
}

.src-line.nav-highlight {
    background: rgba(59, 130, 246, 0.2) !important;
    transition: background 0.5s ease-out;
}

body.dark-mode,
:root[data-theme="dark"] {
    --bg-color: #1e1e1e;
    --sidebar-bg: rgba(30, 30, 30, 0.95);
    --panel-bg: #1e1e1e;
    --header-bg: #1e1e1e;

    --border-color: #333333;
    --highlight-color: #eab308;
    --warning-bg: #422006;
    --warning-border: #78350f;

    --text-primary: #f0f0f0;
    --text-secondary: #aaaaaa;
    --text-muted: #666666;
    --text-bright: #ffffff;

    --primary-color: #60a5fa;
    --primary-light: #2d2d2d;
    --secondary-light: #1e1e1e;
    --bg-secondary: #2d2d2d;
    --bg-sidebar: #18181b;
    --bg-card: #27272a;
    --bg-hover: #3f3f46;
    --bg-tertiary: #27272a;
    --bg-primary: #1e1e1e;
    --text-color: #f0f0f0;
    --card-bg: #27272a;

    --glass-bg: rgba(30, 30, 30, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    /* Semantic backgrounds */
    --bg-app: #1e1e1e;
    --bg-panel: #1e1e1e;
    --bg-header: #1e1e1e;
    --bg-input: #1e1e1e;
    --bg-viewer: #252525;
    --bg-viewer-page: #252525;

    /* Status badges */
    --status-pending-bg: #222222;
    --status-pending-text: #888888;
    --status-pending-border: #333333;

    --status-running-bg: #451b03;
    --status-running-text: #fbbf24;
    --status-running-border: #78350f;

    --status-completed-bg: #1a4d2e;
    --status-completed-text: #4ade80;
    --status-completed-border: #14532d;

    --status-failed-bg: #4c0519;
    --status-failed-text: #fb7185;
    --status-failed-border: #881337;

    /* Log Colors */
    --log-user: #4dabff;
    --log-gemini: #d8b4fe;
    --log-thoughts: #94a3b8;
    --log-error: #fb7185;
    --log-success: #4ade80;
    --log-warning: #fbbf24;

    /* Annotation Colors */
    --anno-place: #f472b6;
    --anno-name: #fbbf24;
    --anno-ocr: #2dd4bf;
    --anno-note: #c084fc;

    /* Section Backgrounds */
    --bg-section-upload: #1e1e1e;
    --bg-section-border: #333333;

    /* Source / Code View Colors (Dark Mode) */
    --bg-src: #252525;
    --text-src: #e6edf3;
    --stx-line-num: #6e7681;
    --stx-line-num-border: #30363d;
    --stx-bracket: #8b949e;
    --stx-tag: #ff7b72;
    --stx-attr: #79c0ff;
    --stx-val: #7ee787;
    --stx-comment: #8b949e;
    /* Muted gray for comments */
    --stx-css-selector: #d4d48c;
    /* Pale olive */
    --stx-css-property: #7ee787;
    /* Brighter green */
    --stx-css-value: #79c0ff;
    /* Brighter blue */
    --stx-css-string: #ff7b72;
    /* Brighter pink/red */
    --stx-css-comment: #8b949e;
    /* Muted gray */
    --job-indicator-bg: var(--primary-color);
    --job-indicator-text: #ffffff;
    --job-indicator-border: rgba(255, 255, 255, 0.2);
    --job-indicator-spinner: var(--highlight-color);

    /* Scrollbar Variables (Dark) */
    --scrollbar-thumb: #666666;
    --scrollbar-thumb-hover: #888888;
    --scrollbar-track: rgba(0, 0, 0, 0.01);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    /* Custom focus styles preferred */
}

#view-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 3.5rem;
    padding-bottom: 3rem;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 1.5;
}

/* --- Scrollbars --- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

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

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

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

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover) !important;
}

body.dark-mode {
    --package-digitized-bg: #0c4a6e;
    --package-digitized-text: #7dd3fc;
    --package-digitized-border: #075985;

    --package-annotated-bg: #064e3b;
    --package-annotated-text: #6ee7b7;
    --package-annotated-border: #065f46;

    --package-translated-bg: #4c1d95;
    --package-translated-text: #d8b4fe;
    --package-translated-border: #5b21b6;

    --stage-digitized-bg: var(--package-digitized-bg);
    --stage-digitized-text: var(--package-digitized-text);
    --stage-digitized-border: var(--package-digitized-border);

    --stage-annotated-bg: var(--package-annotated-bg);
    --stage-annotated-text: var(--package-annotated-text);
    --stage-annotated-border: var(--package-annotated-border);

    --stage-translated-bg: var(--package-translated-bg);
    --stage-translated-text: var(--package-translated-text);
    --stage-translated-border: var(--package-translated-border);
}

body.dark-mode {
    scrollbar-color: #666 transparent;
}

/* Global Resizing States */
body[data-resizing],
body.resizing-active,
body.resizing {
    cursor: col-resize;
    user-select: none;
}

body[data-resizing] .sidebar,
body.resizing-active .sidebar,
body.resizing .sidebar,
body[data-resizing] .pane,
body.resizing-active .pane,
body.resizing .pane,
body[data-resizing] .workbench-editor-group,
body.resizing-active .workbench-editor-group,
body.resizing .workbench-editor-group {
    transition: none !important;
}

body[data-resizing] iframe,
body.resizing-active iframe,
body.resizing iframe,
body[data-resizing] .source-panel,
body.resizing-active .source-panel,
body.resizing .source-panel,
body[data-resizing] .split-viewer-iframe,
body.resizing-active .split-viewer-iframe,
body.resizing .split-viewer-iframe {
    pointer-events: none !important;
}

/* --- Menu Bar --- */
.menu-bar {
    display: flex;
    background: var(--sidebar-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    border-bottom: 1px solid var(--border-color);
    padding: 0 1rem;
    height: 50px;
    align-items: center;
    box-shadow: var(--shadow-sm);
    z-index: 50000;
}

#jewishgen-icon-link img {
    height: 28px;
    width: auto;
    transition: transform var(--transition-speed);
}

#jewishgen-icon-link:hover img {
    transform: scale(1.05);
}

.menu-button {
    background: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-speed);
}

.menu-button:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.btn-text-small {
    border: none;
    background: none;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.btn-text-small:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.user-profile-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--panel-bg);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    margin-left: auto;
    height: 34px;
    transition: box-shadow 0.2s, transform 0.1s;
}

.user-profile-nav:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.user-profile-nav:active {
    transform: scale(0.98);
}

/* Dropdowns */
input.tree-item-input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    width: calc(100% - 24px) !important;
    height: 20px !important;
    box-sizing: border-box !important;
    margin-left: 4px !important;
    outline: none !important;
    box-shadow: none !important;
    color: inherit !important;
    line-height: 20px !important;
}

body.dark-mode input.tree-item-input {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    box-shadow: none !important;
}

.creation-node {
    animation: slideInDown 0.2s ease-out;
}

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

input.tree-item-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Ensure the input doesn't trigger drag/selection issues */
.creation-node .tree-item {
    cursor: default;
}

.menu-item {
    position: relative;
}

.menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background-color: var(--sidebar-bg);
    backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: 0.5rem;
    z-index: 51000;
    animation: fadeIn 0.15s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bridge the gap so mouse doesn't leave hover area */
.menu-dropdown::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 4px;
}

.menu-item:hover .menu-dropdown,
.menu-item:focus-within .menu-dropdown,
.menu-item.active .menu-dropdown {
    display: block;
}

.menu-checkbox-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-speed);
    gap: 0.75rem;
    white-space: nowrap;
}

.menu-checkbox-item:hover {
    background-color: var(--primary-light);
}

.menu-checkbox-item input[type="checkbox"] {
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
    cursor: inherit;
}

.menu-checkbox-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.menu-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-speed);
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
    white-space: nowrap;
}

.menu-dropdown-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* --- Drag and Drop --- */
.drag-handle {
    cursor: grab;
    padding: 8px 12px;
    margin: -8px -4px;
    color: var(--text-muted);
    font-size: 18px;
    user-select: none;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.drag-handle:hover {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.drag-handle:hover {
    color: var(--primary-color);
}

.drag-handle:active {
    cursor: grabbing;
}

.dragging {
    opacity: 0.5;
    background-color: var(--primary-light) !important;
}

/* --- Layout Containers --- */
.main-view-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* --- App Container --- */
.app-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    /* Ensure split handles internal scrolling */
    background: var(--bg-color);
    min-height: 0;
}

/* --- Sidebar --- */
.sidebar {
    width: 280px;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.sidebar.resizing {
    transition: none !important;
}

.sidebar.collapsed {
    width: 48px !important;
}

.sidebar.collapsed+#sidebar-resizer {
    display: none;
}

.sidebar.collapsed .sidebar-header {
    justify-content: center;
    padding: 0.5rem 0;
}

.sidebar.collapsed .sidebar-header h2,
.sidebar.collapsed .sidebar-view-tabs,
.sidebar.collapsed .sidebar-header-actions,
.sidebar.collapsed #clear-selection-btn,
.sidebar.collapsed .sidebar-content-view,
.sidebar.collapsed .segment-list {
    display: none !important;
}

.sidebar.collapsed #sidebar-toggle {
    margin: 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2rem;
}

.sidebar-header {
    padding: 0.75rem;
    /* Reduced padding */
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background: var(--glass-bg);
    overflow: hidden;
}

.sidebar-header h2,
.pane-header h3 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    user-select: none;
}

#sidebar-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}

#sidebar-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.sidebar.collapsed #sidebar-toggle {
    margin: 0 auto;
}


.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 10px;
    position: absolute;
    top: -5px;
    right: -5px;
    border: 1.5px solid white;
    font-weight: bold;
    min-width: 14px;
    text-align: center;
}

.tree-item-checkbox {
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--primary-color);
    width: 14px;
    height: 14px;
    opacity: 0.2;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.tree-item:hover .tree-item-checkbox,
.tree-item-checkbox:checked {
    opacity: 1;
}

.tree-item.multi-selected .tree-label-wrapper {
    background-color: var(--primary-light);
    border-radius: 4px;
}

#sidebar-toggle:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
}



/* Segment List */
.segment-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    min-height: 0;
}

.segment-list.scrolling-disabled {
    overflow-y: hidden !important;
}

.tree-node,
.tree-children {
    list-style: none;
    padding-left: 0;
}

.tree-children {
    padding-left: 16px;
    display: none;
    border-left: 1px solid var(--border-color);
    margin-left: 8px;
}

.tree-children.expanded {
    display: block;
    animation: slideDown 0.2s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tree-item {
    display: flex;
    align-items: center;
    user-select: none;
    position: relative;
    font-size: 14px;
    /* For absolute positioned children like indicator */
}

.tree-label-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-speed);
    border: 1px solid transparent;
    overflow: hidden;
    /* Ensure overflow is contained */
}

.tree-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    /* Critical for ellipsis in flexbox */
}

.tree-item:hover .tree-label-wrapper,
.tree-item[data-item-type="css"]:hover .tree-label-wrapper,
.tree-item[data-item-type="image"]:hover .tree-label-wrapper,
.tree-item[data-item-type="font"]:hover .tree-label-wrapper {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    cursor: pointer;
}

.tree-item.selected .tree-label-wrapper {
    background-color: var(--primary-light);
    color: var(--primary-color);
    border-color: rgba(15, 76, 129, 0.1);
    font-weight: 500;
}

.tree-item:focus {
    outline: none;
}

.tree-item:focus > .tree-label-wrapper {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Visual indication for context menu target */
.tree-item.context-target .tree-label-wrapper,
.tree-item.renaming .tree-label-wrapper {
    outline: 2px solid rgba(15, 76, 129, 0.6);
    outline-offset: -2px;
    background-color: var(--bg-hover) !important;
}

.tree-item.missing {
    opacity: 0.6;
    color: #ef4444 !important; /* Tailwind red-500 */
    cursor: not-allowed;
}

.tree-item.missing .tree-label {
    text-decoration: line-through;
}

.tree-item.missing .tree-icon {
    color: #ef4444 !important;
}

.tree-item.renaming .tree-label-wrapper {
    background-color: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

body.dark-mode .tree-item.renaming .tree-label-wrapper,
body.dark-mode .tree-item.context-target .tree-label-wrapper {
    outline-color: #60a5fa;
}

.toggle-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}

.toggle-icon:hover {
    color: var(--text-primary);
}


.tree-icon {
    margin-right: 8px;
    color: var(--text-muted);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Declarative Tree Icon Colors */
.tree-item[data-type="xhtml"] .tree-icon,
.tree-item[data-type="segment"] .tree-icon {
    color: #3b82f6; /* Blue */
}
.tree-item[data-type="css"] .tree-icon {
    color: #ef4444; /* Red */
}
.tree-item[data-type="image"] .tree-icon {
    color: #f59e0b; /* Orange */
}
.tree-item[data-type="font"] .tree-icon {
    color: #8b5cf6; /* Purple */
}
.tree-item[data-type="town"] .tree-icon {
    color: #4b5563; /* Charcoal */
}
.tree-item[data-type="directory"] .tree-icon,
.tree-item[data-type="folder"] .tree-icon,
.tree-item[data-type="section"] .tree-icon {
    color: #6b7280; /* Gray */
}
.tree-item[data-role="opf"] .tree-icon,
.tree-item[data-type="opf"] .tree-icon {
    color: #10b981; /* Emerald Green for Package Manifest */
}

/* Nav document: same blue icon as other XHTML files, but with emerald dot */
.tree-item[data-role="nav"] .tree-icon,
.tree-item[data-role="nav"][data-type="xhtml"] .tree-icon {
    color: #3b82f6; /* Blue like XHTML */
}

/* Package Documents (nav.xhtml & content.opf) special styling */
.tree-item.package-doc-node .tree-label {
    font-weight: 400;
}

.tree-icon.nav-document::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -3px;
    width: 5px;
    height: 5px;
    background-color: #10b981;
    /* Emerald */
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

body.dark-mode .tree-icon.nav-document::after {
    border-color: #252525;
    box-shadow: none;
}

.tree-item.dirty .tree-icon {
    color: #f59e0b !important; /* Amber takes precedence on edit */
}

.tree-item.missing .tree-icon {
    color: #ef4444 !important; /* Red takes precedence when file is missing */
}

/* Status dots */
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
}

.status-green {
    background-color: #22c55e;
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.4);
}

.status-gray {
    background-color: #cbd5e1;
}

/* Tree Error & Warning Badges */
.tree-error-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1.2;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.tree-error-badge.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.tree-error-badge.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.tree-error-badge.badge-dot-only {
    width: 7px;
    height: 7px;
    padding: 0;
    border-radius: 50%;
}

.status-bar-problems {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.status-bar-problems:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark-mode .status-bar-problems:hover {
    background: rgba(255, 255, 255, 0.08);
}

.status-bar-problem-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.status-bar-problem-item.is-zero {
    color: var(--text-secondary);
    opacity: 0.75;
}

.status-bar-problem-item.has-errors {
    color: #ef4444;
    font-weight: 600;
}

.status-bar-problem-item.has-warnings {
    color: #f59e0b;
    font-weight: 600;
}

.status-bar-problem-item svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* Snapshot Validation Badges */
.snapshot-epub-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 600;
}

.snapshot-epub-badge.pass {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.snapshot-epub-badge.fail {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.snapshot-epub-badge.fail:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.snapshot-epub-badge.pass {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.snapshot-epub-badge.pass:hover {
    background: rgba(34, 197, 94, 0.25);
    transform: translateY(-1px);
}

.snapshot-epub-badge.unknown {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

body.dark-mode .snapshot-epub-badge.pass {
    color: #4ade80;
}

body.dark-mode .snapshot-epub-badge.fail {
    color: #f87171;
}

/* Tree Controls */
.tree-controls {
    display: flex;
    gap: 0;
    margin-left: 4px;
    position: relative;
    min-width: 20px;
    /* Reserve space for toggle, keeping indentation stable */
}

/* Remove hover dependency - usually these are display:none, so only show when dirty */
.tree-item .tree-controls {
    opacity: 1;
}

.save-segment-btn,
.revert-segment-btn {
    position: absolute;
    z-index: 100;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--transition-speed);
    top: 50%;
    transform: translateY(-50%);
}

/* Position buttons to the left of the name/toggle area */
/* Save button further left */
.save-segment-btn {
    left: -28px;
}

/* Revert button at toggle position (overlapping toggle if present, but segments usually leaf) */
.revert-segment-btn {
    left: -4px;
}

.save-segment-btn:hover {
    background-color: #dcfce7;
    color: #166534;
}

.revert-segment-btn:hover {
    background-color: #fee2e2;
    color: #991b1b;
}


/* --- Main Content --- */
.main-content {
    flex: 1;
    display: flex;
    background-color: #e2e8f0;
    /* Splitter color */
    gap: 1px;
    overflow: hidden;
}

.pane {
    flex: 1 1 0%;
    background-color: var(--panel-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    contain: layout; /* Isolate layout without blocking CSS variable inheritance into Shadow DOM */
}

.pane-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--primary-color), transparent);
    background-size: 200% 100%;
    animation: loading-bar 1.5s infinite linear;
    z-index: 1000;
}

@keyframes loading-bar {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.pane-header {
    height: 50px;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-bg);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

.pane-header .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.pane-header .header-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pane-header .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pane-header>* {
    min-width: 0;
}

/* Shared styles handled above */

.controls-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-shrink: 1;
}

.zoom-controls {
    display: flex;
    align-items: center;
    background: var(--bg-input);
    padding: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.zoom-controls button {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: bold;
}

.zoom-controls button:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

/* Base typography for PDF viewer controls */
.zoom-level,
#pdf-page-num,
#digitized-page-num,
#annotated-page-num,
#translated-page-num,
.page-indicator,
.pdf-nav-group button,
.pdf-nav-group span,
.digitized-nav-group button,
.digitized-nav-group span,
.annotated-nav-group button,
.annotated-nav-group span,
.translated-nav-group button,
.translated-nav-group span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    font-variant-numeric: tabular-nums !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page-indicator span[id$="-start"],
.page-indicator span[id$="-end"] {
    cursor: pointer;
    color: var(--text-secondary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    font-weight: normal !important;
    transition: opacity 0.2s;
}

.page-indicator span[id$="-start"]:hover,
.page-indicator span[id$="-end"]:hover {
    opacity: 0.7;
}

.pdf-header-left h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}


.close-pane-btn {
    justify-self: end;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color var(--transition-speed);
}

.close-pane-btn:hover {
    color: #ef4444;
}

.pane-body {
    flex: 1;
    position: relative;
    background-color: var(--panel-bg);
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background-color: var(--panel-bg);
    overflow: hidden; /* Let internal content handle its own scrolling if necessary, but contain the box */
}

.placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-style: italic;
    background-color: var(--panel-bg);
    text-align: center;
    width: 100%;
    height: 100%;
}

/* --- Source View Panel --- */
/* Source / Code Panel — theme-aware */
.source-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-src);
    overflow: auto;
    font-family: 'JetBrains Mono', 'Roboto Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 1.4rem;
    font-weight: 450;
    line-height: 1.6;
    padding: 12px 16px 12px 0;
    white-space: pre;
    overflow-x: auto;
    box-sizing: border-box;
    color: var(--text-src);
    direction: ltr;
    text-align: left;
    outline: none;
    cursor: default;
    counter-reset: src-line-num;
}

.source-panel[contenteditable="true"],
.source-panel.is-editing {
    cursor: default;
    background: var(--bg-src);
}

.src-line {
    display: block;
    counter-increment: src-line-num;
    padding-left: 0.5em;
    cursor: text;
    position: relative;
    /* For gutter markers */
}

.src-line::before {
    content: counter(src-line-num);
    display: inline-block;
    min-width: 3.5em;
    text-align: right;
    padding-right: 1em;
    margin-right: 0.5em;
    color: var(--stx-line-num);
    border-right: 1px solid var(--stx-line-num-border);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* theme-aware syntax highlighting (Global) */
.stx-bracket {
    color: var(--stx-bracket);
}

.stx-tag {
    color: var(--stx-tag);
}

.stx-attr {
    color: var(--stx-attr);
}

.stx-val {
    color: var(--stx-val);
}

.stx-comment {
    color: var(--stx-comment);
    font-style: italic;
}

/* CSS specific highlighting */
.stx-css-selector { color: var(--stx-css-selector); font-weight: 600; }
.stx-css-property { color: var(--stx-css-property); }
.stx-css-value { color: var(--stx-css-value); }
.stx-css-comment { color: var(--stx-css-comment); font-style: italic; }
.stx-css-string { color: var(--stx-css-string); }

.stx-invis {
    position: relative;
    user-select: all;
}

.stx-invis::before {
    content: attr(data-symbol);
    position: absolute;
    color: var(--text-muted);
    opacity: 0.6;
    font-size: 0.8em;
    pointer-events: none;
    user-select: none;
}

/* Specific position adjustments for symbols */
.stx-invis[data-symbol="␊"]::before {
    top: -0.5em;
    right: 0;
}

.stx-invis[data-symbol="→"]::before {
    left: 0.2em;
}

.stx-invis[data-symbol="·"]::before {
    left: 0.1em;
    font-weight: bold;
}

/* Active state for the source toggle and toolbar buttons */
.icon-button.source-btn-active,
.icon-button.source-doc-btn-active,
.icon-button.markers-btn-active,
.icon-button.fidelity-btn-active,
.icon-button.edit-btn-active,
.icon-button.btn-active,
.icon-button.active {
    color: var(--primary-color) !important;
    background-color: var(--primary-light) !important;
    border-color: var(--primary-color) !important;
}

body.dark-mode .icon-button.source-btn-active,
body.dark-mode .icon-button.source-doc-btn-active,
body.dark-mode .icon-button.markers-btn-active,
body.dark-mode .icon-button.fidelity-btn-active,
body.dark-mode .icon-button.edit-btn-active,
body.dark-mode .icon-button.btn-active,
body.dark-mode .icon-button.active {
    color: var(--text-bright) !important;
    background-color: var(--primary-color) !important;
    border-color: transparent !important;
}

/* Breadcrumb File Path Bar */
.viewer-path-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 16px;
    font-size: 0.75rem;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    color: var(--text-muted, #64748b);
    background: var(--bg-panel, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    overflow-x: auto;
    white-space: nowrap;
    min-height: 24px;
    box-sizing: border-box;
    user-select: text;
    scrollbar-width: none;
    flex-shrink: 0;
}

.viewer-path-bar:empty {
    display: none;
}

.viewer-path-bar::-webkit-scrollbar {
    display: none;
}

body.dark-mode .viewer-path-bar,
[data-theme="dark"] .viewer-path-bar {
    color: var(--text-muted, #94a3b8);
    background: var(--bg-panel-dark, #1e293b);
    border-bottom-color: var(--border-color, #334155);
}

.path-crumb-sep {
    color: var(--text-dim, #94a3b8);
    opacity: 0.6;
    margin: 0 2px;
    user-select: none;
}

.path-crumb {
    color: inherit;
}

.path-crumb.path-crumb-file {
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}

body.dark-mode .path-crumb.path-crumb-file,
[data-theme="dark"] .path-crumb.path-crumb-file {
    color: var(--text-bright, #f8fafc);
}


/* --- Resizers --- */
.resizer {
    background-color: var(--border-color, #e2e8f0);
    transition: background-color var(--transition-speed);
    z-index: 30000;
    /* Higher than sidebar (25000) */
    flex-shrink: 0;
    position: relative;
    touch-action: none;
}

.resizer:not(.resizer-horizontal) {
    width: 4px;
    cursor: col-resize;
    background-color: var(--border-color, #e2e8f0);
}

.resizer:not(.resizer-horizontal)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
    z-index: 10;
    cursor: col-resize;
}

.resizer:hover,
.resizer.resizing,
.resizer.active,
.resizer:not(.resizer-horizontal):hover,
.resizer:not(.resizer-horizontal).resizing,
.resizer:not(.resizer-horizontal).active {
    background-color: var(--primary-color, #0f4c81);
}

#sidebar-resizer,
#resizer-pdf,
#resizer-digitized,
#resizer-annotated {
    width: 4px;
    cursor: col-resize;
}

.resizer-horizontal {
    height: 4px;
    cursor: row-resize;
    background-color: transparent;
    transition: background-color 0.2s;
    z-index: 100;
    width: 100%;
}

.resizer-horizontal:hover,
.resizer-horizontal.resizing {
    background-color: var(--primary-color);
    height: 6px;
}


/* --- Bottom Panel --- */
.bottom-panel {
    height: 300px;
    background-color: var(--panel-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 60;
    flex-shrink: 0;
    min-height: 48px;
    width: 100%;
}

.bottom-panel.collapsed {
    height: 48px !important;
    overflow: hidden;
}

.bottom-panel-header {
    height: 48px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-bg);
}

.tab-buttons {
    display: flex;
    gap: 4px;
}

.tab-button {
    padding: 6px 16px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.tab-button:hover {
    background-color: var(--primary-light);
    color: var(--text-primary);
}

.tab-button.active {
    background-color: white;
    color: var(--primary-color);
    font-weight: 600;
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}

.panel-controls {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
}

.panel-btn {
    background: white;
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.panel-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.bottom-panel-body {
    flex: 1;
    overflow: auto;
    padding: 0;
    background: var(--panel-bg);
}

/* --- Tables --- */
.guides-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.guides-table th {
    background-color: #f8fafc;
    position: sticky;
    top: 0;
    padding: 10px 1rem;
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}

.guides-table td {
    padding: 8px 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

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

.guides-table tr:hover td {
    background-color: #f1f5f9;
}

.guides-table tr.row-selected td {
    background-color: var(--primary-light);
}


/* --- Annotations & Badges --- */

/* Base Underline Style */
.annotation-underline {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    padding-bottom: 0px;
    transition: all 0.2s;
    cursor: pointer;
}

/* Colors */
.underline-place {
    border-bottom-color: #bf5452;
    background-color: rgba(191, 84, 82, 0.1);
}

.underline-name {
    border-bottom-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.1);
}

.underline-ocr {
    border-bottom-color: #3d8c87;
    background-color: rgba(61, 140, 135, 0.1);
}

.underline-note {
    border-bottom-color: #7a668f;
    background-color: rgba(122, 102, 143, 0.1);
}

.annotation-underline:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.html-annotation-selected {
    background-color: #fef08a !important;
    /* Yellow highlight */
    color: black;
    box-shadow: 0 0 0 2px #fef08a;
    border-radius: 2px;
}

/* Badges */
.annotation-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 10;
}

.badge-place {
    background-color: #bf5452;
}

.badge-name {
    background-color: #f59e0b;
}

.badge-ocr {
    background-color: #3d8c87;
}

.badge-note {
    background-color: #7a668f;
}

/* --- Modals (Glassware) --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 450px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Allow tooltips to overflow */
    animation: fadeInContent 0.2s ease-out;
    transform-origin: center;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-bg);
    cursor: move;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

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

.modal-body {
    padding: 1.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--header-bg);
    border-top: 1px solid var(--border-color);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Modal Form Elements */
.field-group {
    margin-bottom: 1.25rem;
}

.field-group label {
    display: block;
    /* margin-bottom handled by field-label-container if present, else 0.5rem */
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.input-with-copy {
    display: flex;
    gap: 0.5rem;
}

input[type="text"],
textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

input[type="text"]:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

.modal-button {
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all var(--transition-speed);
}

.modal-button.small {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
}

.modal-button.secondary {
    background-color: var(--panel-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.modal-button.secondary:hover {
    background-color: #f1f5f9;
}

.modal-button.primary {
    background-color: var(--primary-color);
    color: white;
}

.modal-button.primary:hover {
    background-color: #0c3b65;
    box-shadow: 0 2px 4px rgba(15, 76, 129, 0.3);
}

.modal-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.modal-button.primary:disabled {
    background-color: #94a3b8;
}

.pdf-page-container {
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 0 auto 20px auto;
    /* Explicit centering */
    position: relative;
    display: flex;
    /* To center canvas if it's smaller than container */
    justify-content: center;
    align-items: center;
}

.modal-button.delete {
    background-color: #ef4444;
    color: white;
}

.modal-button.delete:hover {
    background-color: #dc2626;
}

@keyframes pulse-success {
    0% { background-color: transparent; }
    50% { background-color: rgba(34, 197, 94, 0.2); }
    100% { background-color: transparent; }
}

.tree-item.processing-done .tree-label-wrapper {
    animation: pulse-success 2s ease-out;
}

/* Context Menu */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.context-menu {
    position: fixed;
    z-index: 55000;
    background: var(--panel-bg);
    color: var(--text-primary);
    backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 180px;
    font-size: 0.9rem;
    animation: fadeIn 0.1s ease-out;
}

.context-menu-item {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.context-menu-item > span:first-child {
    flex: 1;
}

.context-menu-item:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

.shortcut-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: 16px;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.context-menu-item:hover .shortcut-hint {
    color: inherit;
    opacity: 1;
}

.context-menu-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

/* Submenus */
.context-menu-item {
    position: relative;
    /* Anchor for submenu */
}

.context-menu-item.has-submenu {
    padding-right: 28px;
}

.context-menu-item.has-submenu::after {
    content: '▶' !important;
    font-size: 0.7rem !important;
    color: var(--text-muted) !important;
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.submenu {
    display: none;
    position: absolute;
    top: -4px;
    left: 100%;
    margin-left: 4px;
    background: var(--panel-bg);
    color: var(--text-primary);
    backdrop-filter: blur(var(--backdrop-blur));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 180px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    z-index: 1001;
}

/* Bridge the margin gap */
.submenu::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    /* Covers margin and a bit more for safety */
    width: 10px;
    height: 100%;
}

/* Left-aligned submenu (when near right edge) */
.context-menu.submenu-left .submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 4px;
}

.context-menu.submenu-left .submenu::before {
    left: auto;
    right: -10px;
}

.context-menu-item:hover>.submenu {
    display: block;
    animation: fadeIn 0.1s ease-out;
}

/* Utility to hide/show */
.hidden {
    display: none !important;
}

.resizer-horizontal:hover {
    background-color: #cbd5e1;
}

.bottom-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-color);
    height: 40px;
    background-color: var(--bg-color);
    flex-shrink: 0;
    /* Prevent header from shrinking */
}

.tabs {
    display: flex;
    gap: 0.5rem;
}

.tab-button {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.tab-button:hover {
    color: var(--text-primary);
}

.tab-button.active {
    font-weight: 600;
}

/* Tab specific active colors */
.tab-button[data-tab="place"].active {
    color: #bf5452;
    border-bottom-color: #bf5452;
    background-color: #fff1f0;
}

.tab-button[data-tab="name"].active {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
    background-color: #fffbeb;
}

.tab-button[data-tab="ocr"].active {
    color: #3d8c87;
    border-bottom-color: #3d8c87;
    background-color: #f0fdfa;
}

.tab-button[data-tab="note"].active {
    color: #7a668f;
    border-bottom-color: #7a668f;
    background-color: #fbf7ff;
}

.tab-button[data-tab="edit"].active,
.tab-button[data-tab="proofread"].active,
.tab-button[data-tab="prompt"].active,
.tab-button[data-tab="history"].active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background-color: var(--primary-light);
}



#bottom-panel-toggle {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 0.5rem;
}

.bottom-panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--panel-bg);
    height: calc(100% - 35px);
}

#bottom-panel-tabs.tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

#bottom-panel-tabs.tabs::-webkit-scrollbar {
    display: none;
}

#bottom-panel-tabs .tab-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent !important;
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    text-transform: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

#bottom-panel-tabs .tab-button:hover {
    color: var(--text-primary, #0f172a);
    background-color: rgba(0, 0, 0, 0.04) !important;
}

#bottom-panel-tabs .tab-button.active {
    font-weight: 600;
    color: var(--primary-color, #0f4c81) !important;
    border-bottom: 2px solid var(--primary-color, #0f4c81) !important;
    background-color: transparent !important;
}

.bottom-panel-body .tab-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px 16px;
}

.bottom-panel-body .tab-content.active {
    display: block;
}

.tab-content {
    display: none;
    padding: 1rem;
}

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

.table-container {
    overflow: auto;
}

table {
    min-width: 600px;
    border-collapse: separate;
    /* Allows border-radius to work */
    font-size: 13px;
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    /* Clips children to the border-radius */
    border-spacing: 0;
    /* table-layout will be set to 'fixed' by JS during resize */
}

th,
td {
    padding: 6px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    /* Column borders */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    max-width: 300px;
}

.td-rtl {
    text-align: right;
}

.td-ltr {
    text-align: left;
}

thead {
    background-color: var(--bg-color);
    position: sticky;
    top: 0;
    z-index: 1;
    /* Keep header above content */
}

/* Action Column & Delete Icon */
.action-cell {
    width: 60px;
    padding: 2px 4px !important;
    text-align: center;
    white-space: nowrap;
}

.action-header {
    width: 60px;
}

.delete-icon {
    display: inline-block;
    color: #cbd5e1;
    /* Light gray */
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
}

.delete-icon:hover {
    color: #ef4444;
    background-color: #fee2e2;
}

.edit-icon {
    display: inline-block;
    color: #cbd5e1;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
    margin-right: 4px;
}

.edit-icon:hover {
    color: #2563eb;
    background-color: #dbeafe;
}

/* Persistent selection highlight */
.row-selected {
    background-color: #f3f4f6 !important;
    /* Slight gray fill */
}

.row-selected td {
    border-top: none;
    border-bottom: 1px solid var(--border-color);
    /* Maintain standard row border */
}


/* Hide Actions Header Text */
th.action-header {
    color: transparent;
    width: 30px;
}

th {
    font-weight: 500;
    color: var(--text-primary);
    border-bottom: 1px solid #d1d5db;
    position: relative;
    /* For resize handle positioning */
    text-align: center;
}

td {
    color: var(--text-secondary);
}

.add-row-btn,
.delete-row-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
    transition: color 0.2s;
}

.add-row-btn-cell {
    text-align: center;
}

.add-row-btn:hover,
.delete-row-btn:hover {
    color: var(--primary-color);
}

/* Last column shouldn't have a right border or a resizer */
th:last-child,
td:last-child {
    border-right: none;
    width: 60px;
    /* Keep actions column small */
    text-align: center;
}

/* Column Resize Handle */
.resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    /* Center the handle on the border */
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background-color: transparent;
    transition: background-color 0.2s;
}

.resize-handle:hover,
.resize-handle.resizing {
    background-color: var(--primary-color);
}

/* Class added to body during resize operation */
.table-resizing {
    cursor: col-resize;
    user-select: none;
}



/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

#metadata-modal {
    z-index: 150000;
}

#confirm-modal {
    z-index: 200000;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background-color: var(--sidebar-bg);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    cursor: move;
    /* Indicate draggable */
    user-select: none;
    /* Prevent text selection while dragging */
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Special rules for non-blocking config modal */
#config-modal,
#admin-job-dashboard-modal {
    pointer-events: none;
}

#config-modal .modal-overlay,
#admin-job-dashboard-modal .modal-overlay {
    display: none;
}

#config-modal .modal-content {
    pointer-events: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
}

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

.annotation-form {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
}

.annotation-form label {
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
}

.annotation-form .form-field-readonly,
.annotation-form .form-field-input {
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 0.9rem;
}

.annotation-form .form-field-readonly {
    background-color: var(--hover-bg);
    color: var(--text-secondary);
    white-space: pre-wrap;
    /* Wrap long text */
    word-break: break-word;
}


#modal-textarea {
    width: 100%;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--border-color);
}



/* Hover state - Add background tint */
.tab-button:hover {
    background-color: #f3f4f6;
}

.tab-button[data-tab="place"]:hover {
    background-color: #fff1f0;
}

.tab-button[data-tab="name"]:hover {
    background-color: #fffbeb;
}

.tab-button[data-tab="ocr"]:hover {
    background-color: #f0fdfa;
}

.tab-button[data-tab="note"]:hover {
    background-color: #fbf7ff;
}

.modal-button {
    background-color: #f1f5f9;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

.modal-button:hover {
    background-color: #e2e8f0;
}

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

.modal-button.primary:hover {
    background-color: #0c3a62;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-app);
    /* Fully opaque to hide background flicker */
    z-index: 2147483647;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loading-overlay.hidden {
    display: none !important;
}

.loading-logo {
    width: 64px;
    height: 64px;
    margin-bottom: 2rem;
}

#loading-overlay .spinner,
#initial-loader .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color, #f3f3f3);
    border-top: 5px solid var(--primary-color, #3498db);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--text-primary, #333);
    font-weight: 500;
}

#loading-progress-bar, #initial-progress-bar {
    position: relative;
    width: 100%;
    height: 100%;
}

#loading-progress-bar::after, #initial-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #2196F3;
    width: var(--progress, 0%);
    transition: width 0.1s linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Modal Styles */
.input-readonly {
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
}

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

/* General Modal Polish */
.modal-content {
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.modal-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Professional Modal Layout */
.annotation-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 0.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
}

.form-group input,
.form-group textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-readonly {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

.text-display {
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

/* Modal Header Polish */
.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* Modal Footer Polish */
.modal-footer button {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

#modal-save-btn,
#config-modal-save-btn {
    background-color: #2563eb;
    color: white;
    border: none;
}

#modal-save-btn:hover,
#config-modal-save-btn:hover {
    background-color: #1d4ed8;
}

#modal-cancel-btn {
    background-color: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

#modal-cancel-btn:hover {
    background-color: #f3f4f6;
}

/* Config Modal Specifics */
.config-modal-content {
    width: 600px;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.config-modal-content .modal-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

.config-modal-content .modal-header h3 {
    flex: 1;
}

.config-modal-content .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Body handles its own children's scroll */
    padding: 0;
}

.config-form-container {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.config-raw-container {
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden;
}

.line-numbers {
    width: 40px;
    background: #f8fafc;
    color: #94a3b8;
    text-align: right;
    padding: 10px 5px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    user-select: none;
    white-space: pre;
}

#config-editor {
    flex: 1;
    border: none;
    padding: 10px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    resize: none;
    outline: none;
    line-height: 1.5;
    white-space: pre;
    background: #fff;
    color: var(--text-primary);
}

#config-status {
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

#config-modal-full-btn {
    font-size: 0.75rem;
    padding: 2px 8px;
}

.config-text-readonly {
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: var(--text-primary);
    font-weight: 500;
}

.config-form-textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.2s;
}

.config-form-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* Tabbed Prompt UI */
.prompt-tabbed-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prompt-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 2px;
}

.prompt-header-row label {
    margin: 0;
    font-weight: 600;
}

.prompt-pill-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--bg-tertiary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

.prompt-pill-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.prompt-pill-btn:hover {
    color: var(--text-primary, #111827);
    background: rgba(0, 0, 0, 0.05);
}

.prompt-pill-btn.active {
    background: var(--bg-primary, #ffffff);
    color: var(--accent-color, #2563eb);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.prompt-tab-add-btn {
    appearance: none;
    border: 1px dashed var(--border-color, #d1d5db);
    background: transparent;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    margin-left: 2px;
    transition: border-color 0.15s, color 0.15s;
}

.prompt-tab-add-btn:hover {
    border-color: var(--accent-color, #2563eb);
    color: var(--accent-color, #2563eb);
}

.prompt-tab-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

.prompt-textarea-tab {
    display: block;
}

.prompt-textarea-tab.hidden {
    display: none !important;
}

body.dark-mode .prompt-pill-tabs {
    background: var(--bg-tertiary, #2d3748);
    border-color: var(--border-color, #4b5563);
}

body.dark-mode .prompt-pill-btn {
    color: #9ca3af;
}

body.dark-mode .prompt-pill-btn:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .prompt-pill-btn.active {
    background: #1f2937;
    color: #60a5fa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.dark-mode .prompt-tab-add-btn {
    border-color: #4b5563;
    color: #9ca3af;
}

body.dark-mode .prompt-tab-add-btn:hover {
    border-color: #60a5fa;
    color: #60a5fa;
}

/* Compact Read-Only Fields */
.readonly-value {
    width: fit-content;
    min-width: 50px;
    padding: 0.5rem;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    white-space: pre-wrap;
    color: #374151;
    font-size: 0.95rem;
}

/* RTL Support */
.rtl {
    direction: rtl;
    text-align: right;
}

/* Resize Overlay */
#resize-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: transparent;
}

/* Match Indicator Badges */
.match-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 60px;
    white-space: nowrap;
}

.match-exact {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.match-approx {
    background-color: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.match-none {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Copy to Clipboard Buttons */
.readonly-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.copy-button {
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0.25rem 0.75rem;
    height: 32px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-button:hover {
    background-color: #e2e8f0;
    color: var(--text-primary);
    border-color: #cbd5e1;
}

.copy-button:active {
    transform: scale(0.95);
}

.copy-button.copied {
    background-color: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

/* Shared Components */

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--active-bg);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Read-Only Field Style */
.readonly-value {
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    width: fit-content;
    max-width: calc(100% - 80px);
    /* Leave space for Copy button */
    word-break: break-word;
    user-select: text;
    cursor: default;
}

/* Ensure input-with-copy handles flexible content */
.input-with-copy .readonly-value {
    flex: 0 1 auto;
}

/* --- Tooltips --- */
.field-label-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.field-group label {
    margin-bottom: 0;
    /* Remove bottom margin to align with icon */
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    cursor: default;
    transition: color 0.2s;
    margin-top: 1px;
    /* Optical alignment */
}

.info-icon:hover {
    color: var(--primary-color);
}

.info-icon svg {
    width: 100%;
    height: 100%;
}

/* Global Tooltip Element */
#global-tooltip {
    position: fixed;
    background-color: #222;
    color: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    max-width: 280px;
    z-index: 2147483647;
    /* Max Z-Index */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    line-height: 1.5;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s ease-out;
    display: none;
    font-weight: 400;
}

#global-tooltip.visible {
    display: block;
    opacity: 1;
}

/* Auto-fill Suggestion Button */
.input-with-action {
    display: flex;
    gap: 8px;
    align-items: center;
}

.input-with-action input {
    flex: 1;
}

.action-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}


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

/* --- Paging Controls (Legacy Global) --- */

.page-bounds {
    display: inline-block;
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    height: 24px;
    line-height: 24px;
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-align: center;
    padding: 0 4px;
    margin: 0;
    cursor: pointer;
}
.page-bounds:hover {
    opacity: 0.7;
}





/* Zoom Level Specific Refinement */
input.zoom-level {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 2px !important;
    height: 24px !important;
    line-height: 24px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    cursor: text;
}

input.zoom-level:hover {
    background: var(--primary-light) !important;
    border-color: var(--border-color) !important;
}

input.zoom-level:focus {
    background: var(--bg-card) !important;
    border-color: var(--primary-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
}

/* Specific override using ID to beat any cached styles */


.page-indicator {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}





/* Cleaned up redundant .zoom-level definition */

.action-trigger-btn svg {
    width: 16px;
    height: 16px;
    stroke: #eab308;
    /* Yellow-600 */
    fill: #fef08a;
    /* Yellow-200 */
}

.action-trigger-btn:hover svg {
    stroke: #ca8a04;
    /* Yellow-700 */
    fill: #fde047;
    /* Yellow-300 */
}





.page-indicator {
    display: flex;
    align-items: center;
    height: 24px;
}

/* --- Metadata Modal --- */
#metadata-modal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

#metadata-content {
    white-space: pre-wrap;
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--header-bg);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: var(--radius-sm);
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-primary);
    flex: 1;
}

/* Icon Button (Generic) */
.icon-button {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-speed);
}

.icon-button:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

.icon-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Edit Mode Button Refinement */
.edit-mode-btn {
    color: var(--secondary-color) !important;
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--secondary-color) !important;
    font-weight: bold;
}

.edit-mode-btn:hover {
    background-color: var(--secondary-color) !important;
    color: var(--bg-panel) !important;
    border-color: var(--secondary-color) !important;
}

body.dark-mode .edit-mode-btn {
    background-color: var(--bg-app) !important;
}

/* Integrated Editor Toolbar - Floating Pill Overlay */
.integrated-toolbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    height: 42px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--backdrop-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(180%);
    border: 1px solid var(--border-color);
    border-radius: 21px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 8px;
    z-index: 1000;
    font-family: var(--font-main);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
    direction: ltr;
    box-sizing: border-box;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.integrated-toolbar button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-primary);
    border-radius: 15px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.integrated-toolbar button:hover {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.integrated-toolbar .toolbar-sep {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 4px;
}

.integrated-toolbar .btn-save {
    font-weight: bold;
    color: #fff;
    background: #0f4c81;
    border-color: #0f4c81;
}

.integrated-toolbar .btn-save:hover {
    background: #0c3e6b;
}

.integrated-toolbar .btn-cancel {
    color: var(--text-primary);
    border-color: #e2e8f0;
    background: #ffffff;
}

.integrated-toolbar .btn-cancel:hover {
    background: #f1f5f9;
}

/* Dark mode overrides for toolbar - Floating Pill */
body.dark-mode .integrated-toolbar {
    background: rgba(45, 45, 45, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #eee;
}

body.dark-mode .integrated-toolbar button {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.05);
    color: #eee;
}

body.dark-mode .integrated-toolbar button:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

body.dark-mode .integrated-toolbar .toolbar-sep {
    background: #555;
}

body.dark-mode .integrated-toolbar .btn-cancel {
    background: #3d3d3d;
    color: #ddd;
    border-color: #555;
}

#pdf-page-start,
#pdf-page-end,
#digitized-page-start,
#digitized-page-end,
#annotated-page-start,
#annotated-page-end,
#translated-page-start,
#translated-page-end {
    /* font-size: 0.65rem !important; User requested same size as input */
    color: var(--text-secondary) !important;
    font-weight: normal !important;
}

.bulk-matches-list {
    background-color: #f8fafc;
}

.bulk-match-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #e2e8f0;
    transition: background-color 0.2s;
}

.bulk-match-item:last-child {
    border-bottom: none;
}

.bulk-match-item:hover {
    background-color: #f1f5f9;
}

.bulk-match-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.bulk-match-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-match-page {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;
}

.bulk-match-context {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px;
}

/* --- Processing Modals --- */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background: var(--header-bg);
    border-radius: var(--radius-sm);
    min-height: 40px;
    border: 1px solid var(--border-color);
}

.tag {
    background: var(--primary-light);
    color: var(--primary-color);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(15, 76, 129, 0.1);
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: var(--header-bg);
    border-radius: var(--radius-md);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

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

/* Progress & Logs */
.progress-container {
    margin-bottom: 20px;
}

.progress-bar {
    height: 12px;
    background-color: var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #3b82f6);
    width: 0%;
    transition: width 0.3s ease;
}

.progress-bar.indeterminate::after {
    width: 30%;
    animation: indeterminate 1.5s infinite linear;
}

@keyframes indeterminate {
    0% {
        left: -30%;
    }

    100% {
        left: 100%;
    }
}

.progress-text {
    margin-top: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

.log-area {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    padding: 12px;
    border-radius: var(--radius-md);
    height: 300px;
    overflow-y: auto;
    line-height: 1.4;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.log-entry {
    margin-bottom: 2px;
    border-left: 2px solid transparent;
    padding-left: 8px;
}

.log-entry:hover {
    background: rgba(255, 255, 255, 0.05);
}


/* --- Global Job Indicator --- */
.job-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--job-indicator-bg);
    border: 1px solid var(--job-indicator-border);
    border-radius: 30px;
    padding: 8px 16px;
    box-shadow: var(--shadow-lg);
    z-index: 50000;
    cursor: pointer;
    animation: slideInUp 0.3s ease-out;
    transition: background var(--transition-speed), border-color var(--transition-speed), transform 0.1s;
}

.job-indicator:hover {
    background: var(--job-indicator-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.job-indicator:active {
    transform: translateY(0) scale(0.98);
}



.job-indicator-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

#job-indicator-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--job-indicator-text);
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top: 2px solid var(--job-indicator-spinner);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#process-minimize-btn:hover {
    background: var(--primary-light);
    color: var(--primary-color);
}

.config-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-form label {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.config-form input[type="number"],
.config-form input[type="text"],
.config-form select {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    background-color: var(--panel-bg) !important;
    color: var(--text-primary) !important;
}

.config-form input:focus {
    border-color: var(--primary-color);
}

/* Read-only / fixed-value inputs (e.g. Top K when API returns min==max) */
.input-fixed {
    background-color: var(--header-bg) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Make processing modals non-blocking */
#process-config-modal,
#process-progress-modal {
    pointer-events: none;
}

#process-config-modal .modal-overlay,
#process-progress-modal .modal-overlay {
    display: none;
}

#process-config-modal .modal-content,
#process-progress-modal .modal-content,
#admin-job-dashboard-modal .modal-content {
    background: var(--panel-bg);
    pointer-events: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
}

/* Tree Processing Indicator */
/* Tree Processing Indicator */
.tree-processing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 4px;
    margin-left: 2px;
}


/* End of section - marker removed redundant spinner */

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

.tree-item.processing {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Context Menu Disabled State */
.context-menu-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

/* Admin Job Dashboard */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table th {
    background-color: var(--header-bg);
    font-weight: 600;
}

.status-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: capitalize;
}

.status-running {
    background-color: var(--status-running-bg);
    color: var(--status-running-text);
    border: 1px solid var(--status-running-border);
}

.status-pending {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-text);
    border: 1px solid var(--status-pending-border);
}

.status-completed {
    background-color: var(--status-completed-bg);
    color: var(--status-completed-text);
    border: 1px solid var(--status-completed-border);
}

.status-failed {
    background-color: var(--status-failed-bg);
    color: var(--status-failed-text);
    border: 1px solid var(--status-failed-border);
}

.menu-dropdown-button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-speed);
}

.menu-dropdown-button:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* Search Results Styles */
.search-results-table tr {
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.search-results-table tr:hover {
    background-color: var(--primary-light);
}

body.dark-mode .search-results-table tr:hover {
    background-color: var(--bg-app);
}

.search-results-table td {
    padding: 8px;
    font-size: 0.9em;
}

.search-snippet {
    font-family: monospace;
    color: var(--text-secondary);
}

/* Search Modal - Modeless Interaction */
#search-modal {
    background-color: transparent !important; /* Fully transparent backdrop */
    pointer-events: none; /* Let pointer events pass through to elements below */
}

#search-modal .modal-content {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    pointer-events: auto; /* Enable all pointer events inside the actual search window */
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

#search-query:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15);
}

.scope-pill-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.scope-pill-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.scope-pill-checkbox .pill-label {
    display: inline-block;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    background-color: var(--bg-main);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.scope-pill-checkbox input:checked + .pill-label {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.scope-pill-checkbox:hover .pill-label {
    border-color: var(--text-muted);
}

.search-results-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

.search-results-table th {
    background-color: var(--bg-main);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
}

.search-results-table tbody tr {
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.search-results-table tbody tr:hover {
    background-color: var(--bg-hover) !important;
}

.search-results-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color);
}

.search-snippet b {
    background-color: rgba(0, 240, 255, 0.15); /* soft cyan highlight */
    color: #00acc1; /* cyan text */
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* Search Table Fonts */
.search-results-table td {
    font-size: 14px;
    /* Larger font */
    color: var(--text-primary);
    /* Darker text */
    vertical-align: top;
    padding: 8px;
    /* Ensure padding */
}

/* Snippet specific */
.search-snippet {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Cell alignments and layout text truncation */
.search-results-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-results-table td:nth-child(3),
.search-results-table td:nth-child(4) {
    text-align: center;
}

/* Resize Handles */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    background-color: transparent;
    transition: background-color 0.2s;
    z-index: 10;
}
.col-resize-handle:hover,
.col-resize-handle.resizing {
    background-color: var(--border-color);
    width: 6px;
}

/* Search Table Column Sizing and Hover Styles */
.search-results-table {
    table-layout: fixed;
    width: 100%;
}

.search-results-table th {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

.search-results-table th:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary);
}

.search-results-table th:nth-child(1) {
    width: 260px;
}

.search-results-table th:nth-child(2) {
    width: 140px;
}

.search-results-table th:nth-child(3) {
    width: 70px;
    text-align: center;
}

.search-results-table th:nth-child(4) {
    width: 70px;
    text-align: center;
}

.search-results-table th:nth-child(5) {
    width: auto;
}

.search-results-table td:nth-child(5) {
    font-family: 'David', 'Times New Roman', serif;
    font-size: 16px;
}

/* Segment formatting in Admin Dashboard */
.job-segment-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 200px;
    /* Constrain width */
}

.job-segment-list {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    flex: 1;
    color: var(--text-color);
}

.more-badge {
    background: var(--bg-soft);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.copy-btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.1s;
    line-height: 1;
    flex-shrink: 0;
}

.copy-btn-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}

.copy-btn-icon:active {
    transform: scale(0.95);
}

/* --- Tree Item Processing State --- */
.spinner-tiny {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--job-indicator-spinner);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

body.dark-mode .tree-processing-indicator .spinner-tiny {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-top-color: var(--highlight-color) !important;
}

/* Hide the file/segment icon when processing */
.tree-item.processing .tree-icon {
    display: none;
}

/* Style the indicator to match icon size */
.tree-processing-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    /* Matches .tree-icon margin */
    width: 14px;
    /* Matches svg icon width */
    height: 14px;
}

/* --- Version Comparison --- */
.row-selected {
    background-color: var(--primary-light) !important;
}

body.dark-mode .row-selected {
    background-color: rgba(15, 76, 129, 0.3) !important;
}

.row-selected td {
    color: var(--primary-color) !important;
    font-weight: 500;
}

body.dark-mode .row-selected td {
    color: var(--text-bright) !important;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    border: 1px solid transparent;
}

.status-badge.digitized {
    background-color: var(--stage-digitized-bg);
    color: var(--stage-digitized-text);
    border-color: var(--stage-digitized-border);
}

.status-badge.annotated {
    background-color: var(--stage-annotated-bg);
    color: var(--stage-annotated-text);
    border-color: var(--stage-annotated-border);
}

.status-badge.translated {
    background-color: var(--stage-translated-bg);
    color: var(--stage-translated-text);
    border-color: var(--stage-translated-border);
}

.diff-added {
    background-color: #e6ffec;
    color: #1a7f37;
    text-decoration: none;
    padding: 1px 0;
    border-bottom: 2px solid #2da44e;
}

.diff-removed {
    background-color: #ffebe9;
    color: #cf222e;
    text-decoration: line-through;
    padding: 1px 0;
}

.compare-container {
    display: flex;
    gap: 20px;
    height: 100%;
}

.compare-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    min-width: 0;
    /* Important for flex child with overflow */
}

.compare-pane-header {
    padding: 10px 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.compare-pane-content {
    padding: 15px;
    overflow-y: auto;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.6;
    white-space: pre-wrap;
    flex-grow: 1;
}

.version-select-cb {
    transform: scale(1.2);
    cursor: pointer;
}

#history-compare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Analyze Workspace --- */
.workspace-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-color);
}

.workspace-header {
    height: 60px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.workspace-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
}

.workspace-content {
    flex: 1;
    overflow: hidden;
    padding: 1rem;
    gap: 1rem;
}

.two-pane {
    display: flex;
    flex-direction: row;
}

.left-pane {
    width: 350px;
    flex: none;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.right-pane {
    flex: 1;
    background: var(--bg-panel);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.form-group input,
.form-group select {
    padding: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
}

.actions-panel {
    background: #f8fafc;
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.structure-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.structure-table th {
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.structure-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.structure-table tr:hover {
    background-color: #f1f5f9;
}

/* RTL Support for Dashboard TOC */
.pane.right-pane.rtl h3 {
    text-align: right;
}

.pane.rtl .structure-table {
    direction: rtl;
}

.pane.rtl .structure-table th,
.pane.rtl .structure-table td {
    text-align: right;
}

.btn {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn.small {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

body.dark-mode .btn:not(.primary) {
    background-color: var(--bg-panel);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

body.dark-mode .btn:not(.primary):hover {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

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

.btn.primary:hover {
    background-color: #0c3b66;
}

.btn.secondary {
    background-color: white;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn.secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: #f8fafc;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.alert {
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert.warning {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.model-select {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.model-select label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.model-select select {
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* --- App View Layout --- */
.view-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 83px);
}

/* --- Project List --- */
.project-list-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
}

.project-list-container h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.project-actions {
    margin-bottom: 2rem;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.project-card {
    background: white;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.project-card h3 {
    font-size: 1.25rem;
    margin: 0;
}

.project-meta {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --- Dashboard --- */
.dashboard-container {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    overflow-y: auto;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dashboard-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    flex: 1;
}

.stat-card span {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.error {
    color: #dc2626;
    background-color: #fef2f2;
    padding: 1rem;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    margin: 1rem 0;
    text-align: center;
    font-weight: 500;
}

.error {
    color: #dc2626;
    background-color: #fef2f2;
    padding: 1rem;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    margin: 1rem 0;
    text-align: center;
    font-weight: 500;
}

/* --- Refined Home View Styles --- */

.project-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    gap: 0;
}

.welcome-logo,
.project-logo-large {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 14px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 16px rgba(15, 76, 129, 0.15);
}

.project-list-container h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* --- Home Page Buttons --- */
.project-actions-center {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 1rem 0 3rem 0;
}

.large-btn {
    padding: 1rem 2rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.large-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.1);
}

.large-btn .btn-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.large-btn .btn-text {
    display: block;
    text-align: left;
    line-height: 1.2;
}

#btn-create-project {
    background-color: var(--primary-color);
    color: #ffffff !important;
}

#btn-open-project {
    background-color: var(--bg-panel);
    border-color: var(--border-color);
    color: var(--text-primary) !important;
}

#btn-open-project:hover {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}

/* Theme overrides for the Open button */
[data-theme="dark"] #btn-open-project {
    background-color: var(--bg-app);
}

.recent-projects-section {
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.recent-projects-section h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.no-projects {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed var(--border-color);
}

/* Updated Project Card */
.project-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.25rem;
    gap: 1.25rem;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 1rem;
}

.project-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.card-icon {
    font-size: 2rem;
    background: #eff6ff;
    color: var(--primary-color);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.card-content {
    flex: 1;
}

.project-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.project-card .meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Consistent Modal Styling (Annotation Style) */
.simple-modal {
    max-width: 550px;
    padding: 0;
    /* Reset padding for header/footer layout */
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    /* For header radius */
}

.simple-modal h2 {
    background-color: var(--bg-panel);
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    color: var(--text-primary);
}

.modal-subtitle {
    padding: 0 1.5rem 1.5rem 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
}

#form-create-project {
    padding: 2rem 2rem 1rem 2rem;
}

/* Matches .form-group from annotation-form-grid */
.styled-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    text-align: left;
}

/* Matching the blue-border style from user request */
.styled-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-radius: 6px;
    transition: all 0.2s;
    outline: none;
}

.styled-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.modal-actions {
    background-color: var(--bg-app);
    padding: 1.25rem 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 1.5rem;
}

.btn-cancel {
    background-color: white;
    border: 1px solid #e2e8f0;
    color: var(--text-secondary);
}

.btn-cancel:hover {
    background-color: #f1f5f9;
}

/* --- New Simple Project List --- */
.project-list-simple {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
}

.project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-panel);
    transition: background-color 0.2s;
    cursor: pointer;
}

.project-row:first-child {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.project-row:last-child {
    border-bottom: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.project-row:hover {
    background-color: var(--primary-light);
}

.project-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.project-time {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* --- Layout Shift Fix & Title Refinement --- */
/* Stable top-anchored layout to prevent vertical jumping during filtering */
#view-home {
    justify-content: flex-start !important;
    align-items: center !important;
    flex: 1;
    height: auto;
    min-height: 0;
    max-height: 100%;
    padding-top: 3.5rem !important;
    padding-bottom: 3rem;
    flex-direction: column;
    overflow-y: auto;
}

.project-list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.project-header-center h1 {
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-align: center;
}

/* --- Open Project Modal Styles --- */
.open-project-search {
    margin-bottom: 1rem;
}

.project-list-scrollable {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.project-list-scrollable .project-row {
    padding: 0.75rem 1rem;
}

.project-list-scrollable .project-row:hover {
    background-color: #f1f5f9;
}

.auth-match {
    background-color: #fffbeb;
    /* Highlight for search matches if needed */
}

/* --- Refined Open Project Modal --- */
#modal-open-project .viz-modal-container {
    max-width: 580px;
    width: 90%;
    box-sizing: border-box;
}

.open-project-search {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    margin: 0 0 1rem 0;
    box-sizing: border-box;
}

.open-project-search .search-input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.open-project-search input {
    padding-left: 34px !important;
    height: 38px;
    line-height: 36px;
    font-size: 0.88rem;
    border-radius: 6px;
    border: 1px solid var(--border-color, #cbd5e1);
    background-color: var(--bg-card, #ffffff);
    color: var(--text-primary, #1e293b);
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.open-project-search input:focus {
    border-color: var(--primary-color, #0f4c81);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.open-project-search .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    pointer-events: none;
    font-size: 0.9rem;
}

.open-project-search .org-select-wrapper {
    width: 185px;
    flex-shrink: 0;
}

.project-list-custom {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    border-radius: 12px;
    padding: 0.5rem;
    box-sizing: border-box;
    width: 100%;
}

.project-list-custom .project-row {
    background: transparent;
    margin-bottom: 2px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.project-list-custom .project-row:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}

.project-list-custom .project-row:last-child {
    border-bottom: 1px solid transparent;
    margin-bottom: 0;
}

.project-list-custom .project-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Custom Scrollbar */
.project-list-custom::-webkit-scrollbar {
    width: 6px;
}

.project-list-custom::-webkit-scrollbar-track {
    background: transparent;
}

.project-list-custom::-webkit-scrollbar-thumb {
    background-color: #718096;
    border-radius: 4px;
}

/* --- Refined Project List Styles --- */
.project-list-container {
    max-width: 800px;
    width: 100%;
    margin: 40px auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    animation: fadeIn 0.5s ease-out;
}

.project-card {
    text-align: center;
}

.project-logo-large {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
}

.app-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.5px;
    margin-bottom: 40px;
}

/* (Refined button styles merged into Home Page Buttons section above) */

/* Recent Projects Card */
.recent-projects-card {
    background: var(--bg-panel);
    border-radius: 16px;
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.recent-header {
    background: var(--bg-app);
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.recent-header h2 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
}

/* Project List Items */
.project-list-simple .project-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.15s;
    text-decoration: none;
    /* In case it was an anchor */
}

.project-list-simple .project-row:last-child {
    border-bottom: none;
}

.project-list-simple .project-row:hover {
    background-color: var(--primary-light);
}

.project-name {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-primary);
}

.project-time {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.no-projects {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Hybrid UI Fixes --- */

/* Revert app title to simpler look if needed, or keep it nice */
.project-header-center h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
    letter-spacing: normal;
}

/* Specific Button Styling per Attachment */
.large-btn {
    /* Override previous large-btn styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px;
    min-width: 240px;
    height: 100px;
    /* Fixed height for consistency */
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1.3;
    text-align: left;
    /* Text aligns left relative to icon */
    gap: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.large-btn .btn-icon {
    font-size: 1.8rem;
    font-weight: bold;
}

/* (Button text styles merged into Home Page Buttons section above) */



/* Reset recent projects to clean list (no card) */
.recent-projects-section {
    margin-top: 50px;
    text-align: left;
    /* Or center? classic was center list items, or list below */
    width: 100%;
}

.recent-projects-section h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.project-list-simple {
    /* Simple list */
    display: flex;
    flex-direction: column;
}

.project-list-simple .project-row {
    /* Ensure rows are visible against background */
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

/* --- Final User Feedback Adjustments --- */
.project-header-center h1 {
    font-size: 2.8rem !important;
    margin-bottom: 40px !important;
}

.project-logo-large {
    max-width: 200px !important;
}


/* --- Modal System --- */
.viz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    pointer-events: auto;
    display: none;
    /* Changed from flex + opacity */
    align-items: center;
    justify-content: center;
}

.viz-modal-overlay.visible {
    display: flex;
    /* Replaces opacity: 1 */
}

.viz-modal-container {
    background-color: var(--bg-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 440px;
    padding: 24px;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--border-color);
}

.viz-modal-container.visible {
    transform: translateY(0);
}

.viz-modal-container.size-small { max-width: 320px; }
.viz-modal-container.size-medium { max-width: 440px; }
.viz-modal-container.size-large { max-width: 850px; }

/* EPUB Workbench Layout Stabilization */
.workbench-content {
    height: 500px;
    overflow-y: auto;
    padding: 0 4px;
}

/* EPUB Workbench Gallery */
.cover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-app);
}

.cover-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #000;
}

.cover-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-color);
}

.cover-item.selected {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
}

.cover-item img {
    width: 100%;
    height: 180px; /* Fixed height for uniform grid */
    object-fit: contain;
}

/* Selection Confirmation Overlay */
.cover-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.cover-item.selected .cover-item-overlay {
    opacity: 1;
    pointer-events: auto;
}

.select-confirm-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.cover-item.selected .select-confirm-btn {
    transform: translateY(0);
}

.select-confirm-btn:hover {
    background: var(--primary-hover, #2563eb);
    transform: scale(1.05);
}



.viz-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.viz-modal-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.viz-modal-icon.success {
    background-color: #dcfce7;
    color: #166534;
}

.viz-modal-icon.error {
    background-color: #fee2e2;
    color: #991b1b;
}

.viz-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.viz-modal-body {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.viz-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.viz-modal-footer .btn {
    min-width: 80px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.viz-modal-footer .btn.primary {
    background-color: var(--primary-color);
    color: white;
}

.viz-modal-footer .btn.primary:hover {
    background-color: #0c3e6b;
}

.viz-modal-footer .btn.secondary {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.viz-modal-footer .btn.secondary:hover {
    background-color: #f1f5f9;
}

/* --- Global Dim Animation --- */
.app-dim-overlay {
    position: fixed;
    inset: 0;
    background-color: black;
    opacity: 0;
    pointer-events: none;
    z-index: 60000;
    /* High enough to cover everything */
    animation: dimPulse 0.8s ease-out forwards;
}

@keyframes dimPulse {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.15;
    }

    /* Subtle dim */
    100% {
        opacity: 0;
    }
}

/* --- Sticky Table Headers for Project Editor --- */
.list-head-sticky,
.segment-header-sticky {
    position: sticky;
    top: -20px;
    /* Offset to align with the top of the padding in .pane-content-scrollable */
    z-index: 100;
    background: var(--bg-app) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--border-color);
}

.list-head-sticky {
    background: var(--bg-app) !important;
}

.segment-header-sticky {
    background: var(--bg-app) !important;
}

/* Ensure parents don't clip the sticky effect */
.structure-editor,
.section-item {
    overflow: visible !important;
}

/* --- HTML Editor Styles --- */
.html-editor-wrapper .ql-editor {
    direction: rtl;
    text-align: right;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}

.html-editor-wrapper .ql-editor p {
    text-align: right;
}

/* Edit Button Prominence */
.edit-mode-btn {
    color: var(--primary-color) !important;
    background-color: var(--primary-light) !important;
    border: 1px solid var(--primary-color) !important;
}

.edit-mode-btn:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* =======================================================
   DARK MODE OVERRIDES
   ======================================================= */

/* Scrollbars in dark mode (now handled via variables) */

/* Tree hover in dark mode */
body.dark-mode .tree-item:hover .tree-label-wrapper {
    background-color: var(--bg-header);
    color: var(--text-primary);
}

/* Selected segments contrast in dark mode */
body.dark-mode .tree-item.selected .tree-label-wrapper,
body.dark-mode .tree-item.multi-selected .tree-label-wrapper {
    color: var(--text-bright);
    background-color: var(--primary-color);
}

/* Sidebar toggle hover in dark mode */
body.dark-mode #sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Input fields in dark mode */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Buttons / tool buttons in dark mode */
body.dark-mode button:not(.menu-button):not(.menu-dropdown-item):not(.menu-dropdown-button):not(.menu-checkbox-item):not(.primary-btn):not(.primary):not(.user-profile-nav) {
    color: var(--text-secondary);
}

/* Modal backdrops / overlays in dark mode */
body.dark-mode .modal-overlay,
body.dark-mode .viz-modal-overlay,
body.dark-mode .app-dim-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Modal content boxes in dark mode */
body.dark-mode .modal-content,
body.dark-mode .simple-modal,
body.dark-mode .viz-modal-container {
    background-color: var(--panel-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Modal headers/footers */
body.dark-mode .modal-header,
body.dark-mode .viz-modal-header,
body.dark-mode .modal-footer,
body.dark-mode .viz-modal-footer {
    background-color: var(--header-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .viz-modal-header h2,
body.dark-mode .viz-modal-header h3 {
    color: var(--text-primary) !important;
}

/* PDF viewer dark mode via CSS invert on rendered canvas */
body.dark-mode #pdf-render-wrapper,
body.dark-mode #editor-pdf-render-wrapper {
    filter: invert(0.9) hue-rotate(180deg);
}

body.dark-mode #pdf-container {
    background-color: var(--bg-viewer);
}

/* HTML/digitized viewer pane background — matches PDF grey */
body.dark-mode .digitized-pane .pane-body,
body.dark-mode .annotated-pane .pane-body,
body.dark-mode .translated-pane .pane-body {
    background-color: var(--bg-viewer);
}


/* Source code panel — now always dark-themed (no override needed) */

/* Context menus in dark mode */
body.dark-mode .context-menu,
body.dark-mode .submenu {
    background-color: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

body.dark-mode .context-menu-item:hover,
body.dark-mode .context-menu-item:focus {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* Bottom prompt panel in dark mode */
body.dark-mode #main-prompt-panel,
body.dark-mode .prompt-panel,
body.dark-mode .chat-panel {
    background-color: var(--panel-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Bottom panel body and footer */
body.dark-mode .bottom-panel-body,
body.dark-mode .bottom-panel-footer,
body.dark-mode #prompt-container {
    background-color: var(--panel-bg);
}

/* Tab active state override */
body.dark-mode .tab-button.active {
    background-color: var(--panel-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Config form textarea in dark mode */
body.dark-mode .config-form-textarea {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Guides / table in dark mode */
body.dark-mode .guides-table th {
    background-color: var(--bg-app);
    color: var(--text-secondary);
}

body.dark-mode .guides-table td {
    color: var(--text-primary);
}

body.dark-mode .guides-table tr:hover td {
    background-color: var(--bg-app);
}

/* Source/code area backgrounds */
body.dark-mode .bottom-panel-body>div,
body.dark-mode [class*="source"] [class*="body"],
body.dark-mode [class*="panel"]>div[class*="body"] {
    background-color: var(--panel-bg);
}

/* Progress / loading overlays */
body.dark-mode #editor-progress-overlay {
    background: rgba(15, 23, 42, 0.95) !important;
    color: var(--text-primary);
}

/* Config form and any sidebar form-like containers */
body.dark-mode .config-form-container,
body.dark-mode .config-form {
    background-color: var(--panel-bg);
    color: var(--text-primary);
}

/* Readonly / info fields */
body.dark-mode .readonly-value {
    background-color: var(--bg-app);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ---------------------------------------------------
   PIPELINE STATUS BADGES – dark-mode overrides
   --------------------------------------------------- */

/* "Not Started" / pending badge: make clearly visible, not white */
body.dark-mode .status-pending {
    background-color: var(--status-pending-bg);
    color: var(--status-pending-text);
}

/* Running badge */
body.dark-mode .status-running {
    background-color: var(--status-running-bg);
    color: var(--status-running-text);
}

/* Completed badge */
body.dark-mode .status-completed {
    background-color: var(--status-completed-bg);
    color: var(--status-completed-text);
}

/* Failed badge */
body.dark-mode .status-failed {
    background-color: var(--status-failed-bg);
    color: var(--status-failed-text);
}

/* Scrollbar track dark mode (handled via variables) */

/* ---------------------------------------------------
   MAIN CONTENT DIVIDER (gap between panes)
   The .main-content gap uses background-color directly
   --------------------------------------------------- */
body.dark-mode .main-content {
    background-color: var(--border-color);
}

/* Edit button in dark mode: use the same slate gray as Not Started badges */
body.dark-mode .edit-mode-btn {
    background-color: var(--status-pending-bg) !important;
    color: var(--status-pending-text) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .edit-mode-btn:hover {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

/* Strengthen Not Started badge: darker slate so it's clearly visible */
body.dark-mode .status-pending {
    background-color: var(--status-pending-bg) !important;
    color: #64748b !important;
    border: 1px solid #334155;
}

/* Textarea resize handle (the drag grip in the corner) */
body.dark-mode textarea::-webkit-resizer {
    background-color: #334155;
}

body.dark-mode .config-form-textarea::-webkit-resizer {
    background-color: #334155;
}

/* Modal form inputs/selects (e.g. Gemini model dropdown) */
body.dark-mode .modal-input,
body.dark-mode .modal-input option {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Modal body background */
body.dark-mode .modal-body {
    background-color: var(--panel-bg);
}

/* Config form labels and inputs inside modals */
body.dark-mode .config-form label,
body.dark-mode .form-group label,
body.dark-mode .checkbox-item span {
    color: var(--text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-row input {
    background-color: var(--bg-app);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ─── Version History Modal ─────────────────────────────────────────── */
.history-item-card {
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #ffffff;
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.history-item-card:hover {
    background-color: #f5f5f5;
}

.history-item-card.history-item-active {
    background-color: #f0f7ff;
    border-left: 6px solid #007bff;
    border-color: #b3d7ff;
}

.history-timestamp {
    color: #666;
    font-size: 0.9em;
}

.history-current-label {
    color: #007bff;
    font-weight: bold;
    font-size: 0.9em;
}

/* Dark mode overrides for history items */
body.dark-mode .history-item-card {
    background-color: var(--panel-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

body.dark-mode .history-item-card:hover {
    background-color: #263348;
}

body.dark-mode .history-item-card.history-item-active {
    background-color: #1a2d45;
    border-left-color: #3b82f6;
    border-color: #1e4a7a;
}

body.dark-mode .history-timestamp {
    color: var(--text-secondary);
}

body.dark-mode .history-current-label {
    color: #60a5fa;
}

/* ─── Page Metadata Modal ───────────────────────────────────────────── */
.metadata-pre {
    white-space: pre-wrap;
    font-family: monospace;
    background: #f8f9fa;
    color: #1e293b;
    padding: 10px;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
}

body.dark-mode .metadata-pre {
    background: #0f172a;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* --- Project Editor Styles --- */
.workspace-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
}

.form-pane {
    background-color: var(--bg-panel) !important;
}

#view-editor .pane-header {
    background-color: var(--bg-app) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.tab-btn {
    padding: 8px 16px;
    border: none;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

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

.tab-btn.active {
    background-color: var(--bg-tab-active);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

body.dark-mode .tab-btn.active {
    background-color: var(--bg-input);
    color: var(--text-bright);
}

body.dark-mode .tab-btn:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.form-group label {
    color: var(--text-primary);
}

.current-source-info {
    background-color: var(--bg-app) !important;
    border-color: var(--border-color) !important;
}

.current-source-info div {
    color: var(--text-secondary);
}

.current-source-info div:nth-child(even) {
    color: var(--text-primary);
}

.upload-section-inner {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg) !important;
}

#project-editor-form input,
#project-editor-form textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

#project-editor-form hr {
    border-top: 1px solid var(--border-color) !important;
}

.list-head-sticky {
    background-color: var(--bg-app) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* --- Utility Classes --- */
.btn-danger-soft {
    background-color: var(--status-failed-bg);
    color: var(--status-failed-text);
    border: 1px solid var(--status-failed-border);
}

.warning-box {
    background-color: var(--warning-bg);
    border: 1px solid var(--warning-border);
}

.tabs {
    border-bottom: 1px solid var(--border-color);
}
/* --- Validation Report --- */
.validation-table {
    width: 100%;
    margin-top: 10px;
    table-layout: auto;
}

.validation-table th, .validation-table td {
    white-space: normal;
    word-break: break-word;
    padding: 8px;
    font-size: 0.85rem;
}

.validation-table th:nth-child(1),
.validation-table td:nth-child(1) {
    width: 1%;
    white-space: nowrap;
}

.validation-table th:nth-child(2),
.validation-table td:nth-child(2) {
    width: 1%;
    white-space: nowrap;
}

.validation-table .lvl-fatal, .validation-table .lvl-error {
    color: #dc2626;
    background-color: #fef2f2;
}

.validation-table .lvl-warning {
    color: #d97706;
    background-color: #fffbeb;
}

.validation-table .lvl-info {
    color: #2563eb;
    background-color: #eff6ff;
}

.validation-table .msg-cell {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 1px;
    cursor: pointer;
}

.validation-table .msg-cell.expanded {
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
}

/* --- Publish Modernization Utilities --- */
.disabled-action {
    opacity: 0.35 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

body.resizing-active,
body.resizing-active *,
body.resizing-active iframe {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.th-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 100;
}

.th-resizer:hover {
    background: var(--primary-color);
    opacity: 0.3;
}

body.resizing-col,
body.resizing-col iframe {
    cursor: col-resize !important;
    user-select: none !important;
}



/* Generator Badges in History */
.generator-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

.human-badge {
    color: #0f4c81;
    background-color: #e6f0fa;
}

.ai-badge {
    color: #6b21a8;
    background-color: #f3e8ff;
}

.dark-mode .human-badge {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
}

.dark-mode .ai-badge {
    color: #c084fc;
    background-color: rgba(192, 132, 252, 0.1);
}

.generator-badge svg {
    width: 14px;
    height: 14px;
}

/* EPUB Validation Report */
.validation-report {
    max-height: 50vh;
    overflow-y: auto;
    text-align: left;
    padding: 10px;
}
.report-summary {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: 600;
}
.report-summary.has-errors { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.report-summary.has-warnings { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }

.report-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.report-item {
    padding: 10px;
    background: var(--bg-secondary);
    border-radius: 4px;
    border-left: 4px solid #ccc;
    font-size: 0.9em;
}
.report-item.level-fatal, .report-item.level-error { border-left-color: #ef4444; }
.report-item.level-warning { border-left-color: #f59e0b; }

.report-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75em;
    font-weight: bold;
    margin-right: 8px;
    background: #444;
    color: white;
}
.report-file {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.85em;
}
.report-msg {
    margin-top: 4px;
    line-height: 1.4;
}
/* Drag and Drop Reordering */
.tree-item.dragging {
    opacity: 0.5;
    background: var(--bg-hover) !important;
}

.tree-item.drag-over-top {
    border-top: 2px solid var(--accent-color, #3b82f6) !important;
}

.tree-item.drag-over-bottom {
    border-bottom: 2px solid var(--accent-color, #3b82f6) !important;
}

.tree-item.drag-over-folder {
    background: var(--bg-hover) !important;
    outline: 2px dashed var(--accent-color, #3b82f6) !important;
    outline-offset: -2px;
}

.tree-item.dragging .tree-item-checkbox {
    display: none !important;
}

/* Prevent children from intercepting drag events */
.tree-item.dragging *,
.tree-item.drag-over-top *,
.tree-item.drag-over-bottom *,
.tree-item.drag-over-folder * {
    pointer-events: none !important;
}

/* =========================================================
   SPECIALIZED PANES (Type-Aware UI)
   ========================================================= */
.tab-pane-container {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.pane.code-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background-color: var(--bg-viewer, #1e1e1e);
    align-items: stretch;
    justify-content: stretch;
    text-align: left;
    overflow: hidden;
}

.pane.font-pane,
.pane.image-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    background-color: var(--bg-viewer, #1e1e1e);
    overflow: hidden;
}

.specialized-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-viewer);
    color: var(--text-primary);
    padding: 2rem;
    overflow: auto;
    text-align: center;
}

.specialized-content {
    max-width: 600px;
}

.folder-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.code-view-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-src);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.code-view-header {
    padding: 8px 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    position: relative;
}

.code-view-header .badge {
    position: static;
    top: auto;
    right: auto;
    margin-left: auto;
    border: none;
    font-size: 0.7rem;
    padding: 2px 8px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 18px;
}

#code-view-content {
    flex: 1;
    margin: 0;
    padding: 12px 16px 12px 0; /* Match .source-panel padding */
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    overflow: auto;
    color: var(--text-src);
    counter-reset: src-line-num;
}

#code-view-content code {
    display: block;
    width: 100%;
}

#image-view {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0;
}

.image-view-container {
    margin: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    min-height: min-content;
}

.image-edit-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    z-index: 10;
    transition: all 0.3s ease;
}

.image-edit-toolbar .edit-only {
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.image-edit-toolbar.editing .edit-only {
    display: inline-flex;
    align-items: center;
    opacity: 1;
    pointer-events: auto;
}

.toolbar-separator {
    width: 1px;
    height: 1.5rem;
    background: var(--border-color);
    margin: 0 0.5rem;
}

#cropper-wrapper,
.cropper-wrapper {
    max-width: 70vh; /* Constrain width to match max-height for stable rotation */
    max-height: 70vh;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#image-view-img,
.image-view-img {
    max-width: 100%;
    display: block; /* Important for Cropper.js */
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-speed);
    font-size: 1rem;
    min-width: 32px;
    min-height: 32px;
}

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

.btn-icon.active {
    color: var(--primary-color);
    background: var(--primary-light);
}

.btn-icon i {
    pointer-events: none;
}

.image-info, .font-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.image-dims {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.image-dims.visible {
    opacity: 1;
}

.font-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.font-icon {
    font-size: 5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.font-preview {
    font-size: 1.5rem;
    padding: 2rem;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    max-width: 800px;
    line-height: 1.4;
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 450px;
    padding: 14px 20px;
    border-radius: 10px;
    background: var(--panel-bg);
    color: var(--text-primary);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 5px solid var(--primary-color);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.toast.toast-error {
    border-left-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

body.dark-mode .toast.toast-error {
    background: #450a0a;
    color: #fecaca;
    border-left-color: #f87171;
}

.toast.toast-success {
    border-left-color: #10b981;
    background: #ecfdf5;
    color: #065f46;
}

body.dark-mode .toast.toast-success {
    background: #064e3b;
    color: #d1fae5;
    border-left-color: #34d399;
}

.toast.toast-warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}

body.dark-mode .toast.toast-warning {
    background: #451a03;
    color: #fef3c7;
    border-left-color: #fbbf24;
}

.toast.toast-info {
    border-left-color: var(--primary-color);
    background: var(--bg-app);
}

.toast-closing {
    animation: toast-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

/* --- EPUB Validation Panel --- */
.floating-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 650px;
    max-height: 500px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 60000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panel-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.dark-mode .floating-panel {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

@keyframes panel-slide-up {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.floating-panel .panel-header {
    padding: 10px 16px;
    background: var(--primary-color);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.floating-panel .panel-header h3 {
    font-size: 0.9rem;
    margin: 0;
    color: white;
}

.floating-panel .panel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-panel .panel-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.floating-panel .panel-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0, 0, 0, 0.02);
}

.validation-link {
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500;
}

.validation-link:hover {
    color: var(--secondary-color);
}

.msg-cell {
    font-size: 0.85rem;
    line-height: 1.4;
    word-break: break-word;
}

.admin-table.validation-table th {
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    z-index: 1;
}

.lvl-error { color: #ef4444; }
.lvl-warning { color: #f59e0b; }
.lvl-info { color: #3b82f6; }

@media (max-width: 768px) {
    .floating-panel {
        width: calc(100% - 40px);
        left: 20px;
        bottom: 20px;
    }
}

/* =============================================
   Snapshot / Git History Panel
   ============================================= */

.snapshots-loading,
.snapshots-error,
.snapshots-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--text-secondary);
    font-size: 0.9em;
    height: 100%;
}

.snapshots-error { color: var(--danger-color, #ef4444); }

.snapshots-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    min-height: 100%;
    padding: 1rem 0;
    box-sizing: border-box;
}

.snapshots-table {
    width: auto;
    min-width: 600px;
    max-width: 95%;
    border-collapse: collapse;
    font-size: 0.85em;
    table-layout: auto; /* sized to match content automatically */
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-panel, #ffffff);
}

.snapshots-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-secondary, #f3f4f6);
    user-select: none;
}

.snapshots-table thead th.col-num {
    text-align: center;
    width: 60px;
}

.snapshots-table thead th.col-date {
    width: 160px;
}

.snapshots-table thead th.col-message {
    min-width: 300px;
}

.snapshots-table thead th.col-actions {
    text-align: center;
    width: 180px;
}

.snapshots-table tbody .snapshot-row td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.snapshot-row:hover td { background: var(--hover-bg, rgba(0,0,0,0.02)); }
.snapshot-latest td { background: rgba(var(--primary-rgb, 15, 76, 129), 0.04); }

.version-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--bg-secondary, #e5e7eb);
    font-size: 0.8em;
    font-weight: 600;
    color: var(--text-secondary);
}

.latest-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--primary-color, #0f4c81);
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    vertical-align: middle;
}

.commit-hash {
    display: inline-block;
    font-family: var(--font-mono, monospace);
    font-size: 0.85em;
    color: var(--text-muted);
    background: var(--bg-secondary, #f3f4f6);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    margin-right: 8px;
}

.btn-snapshot-action {
    padding: 4px 10px;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    margin: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-snapshot-preview {
    border: 1px solid var(--primary-color, #0f4c81);
    background: transparent;
    color: var(--primary-color, #0f4c81);
}

.btn-snapshot-preview:hover {
    background: var(--primary-color, #0f4c81);
    color: #fff;
}

.btn-snapshot-preview.selected,
.btn-snapshot-preview.active {
    background: var(--primary-color, #0f4c81);
    color: #fff;
    font-weight: 700;
}

body.dark-mode .btn-snapshot-preview,
body[data-theme="dark"] .btn-snapshot-preview {
    border-color: #60a5fa;
    color: #60a5fa;
}

body.dark-mode .btn-snapshot-preview:hover,
body[data-theme="dark"] .btn-snapshot-preview:hover {
    background: #3b82f6;
    color: #fff;
}

body.dark-mode .btn-snapshot-preview.selected,
body.dark-mode .btn-snapshot-preview.active,
body[data-theme="dark"] .btn-snapshot-preview.selected,
body[data-theme="dark"] .btn-snapshot-preview.active {
    background: #2563eb;
    border-color: #60a5fa;
    color: #fff;
    font-weight: 700;
}

.btn-snapshot-download {
    border: 1px solid #10b981;
    background: transparent;
    color: #10b981;
}

.btn-snapshot-download:hover {
    background: #10b981;
    color: #fff;
}

.btn-snapshot-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#snapshots-table-container {
    overflow-y: auto;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
}

/* --- App Status Bar --- */
.app-status-bar {
    height: 33px;
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 11px;
    color: var(--text-secondary);
    user-select: none;
    z-index: 60000;
    flex-shrink: 0;
    box-sizing: border-box;
}

.status-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- App Top Linear Progress Bar --- */
.app-top-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #38bdf8, #6366f1);
    background-size: 200% 100%;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: width 0.3s ease, opacity 0.2s ease;
}

.app-top-progress-bar.active {
    opacity: 1;
    animation: progress-indeterminate 1.8s infinite linear;
}

@keyframes progress-indeterminate {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.status-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.status-indicator-dot.waking {
    background-color: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulse-waking-dot 1.4s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.status-indicator-dot.disconnected {
    background-color: #ef4444;
}

@keyframes pulse-waking-dot {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1.2);
        box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

#status-text {
    transition: color 0.3s ease;
}

#status-text.waking {
    color: #f59e0b;
    font-weight: 500;
}

#status-text.disconnected {
    color: #ef4444;
}

/* Tree item active loading spinner */
.tree-item.is-loading .tree-icon {
    animation: tree-icon-spin 0.8s linear infinite !important;
    color: var(--accent-primary, #3b82f6) !important;
}

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

.status-bar-right {
    font-family: monospace;
    opacity: 0.7;
}

/* Seamless Double-Buffering segment loading states */
.pane-loading,
.pane-loading iframe,
.viewer-container.loading,
.viewer-container.loading * {
    pointer-events: none;
}

/* --- Notification Bell & Badge --- */
.status-bar-bell-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 13px;
    transition: color 0.2s, transform 0.2s;
}

.status-bar-bell-btn:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.status-bar-bell-btn.pulse i {
    animation: bell-ring 0.5s ease;
}

@keyframes bell-ring {
    0%, 100% { transform: rotate(0); }
    20%, 60% { transform: rotate(15deg); }
    40%, 80% { transform: rotate(-15deg); }
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -2px;
    background-color: #ef4444;
    color: white;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    min-width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px;
    box-shadow: 0 0 0 2px var(--sidebar-bg);
}

/* --- Problems Tray (EPUBCheck Diagnostics Popup) --- */
.problems-tray {
    position: fixed;
    bottom: 38px;
    left: 12px;
    width: 740px;
    max-width: calc(100vw - 24px);
    max-height: 420px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 60001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tray-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@keyframes tray-slide-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dark-mode .problems-tray {
    background: rgba(26, 26, 26, 0.96);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 48px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.problems-tray-header {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
    min-height: 38px;
    box-sizing: border-box;
}

.problems-tray-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.problems-tray-icon {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.problems-tray-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.problems-tray-stage-pill,
.problems-tray-package-pill {
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary-color);
    border: 1px solid rgba(59, 130, 246, 0.25);
    letter-spacing: 0.02em;
}

.dark-mode .problems-tray-stage-pill,
.dark-mode .problems-tray-package-pill {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
}

.problems-tray-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.problems-tray-summary-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tray-pill {
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.tray-pill.pill-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.tray-pill.pill-error.is-zero {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.tray-pill.pill-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.tray-pill.pill-warning.is-zero {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.problems-tray-close-btn {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.problems-tray-close-btn:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-primary);
}

.dark-mode .problems-tray-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-bright);
}

.problems-tray-body {
    flex: 1;
    overflow-y: auto;
    max-height: 360px;
}

.problems-tray-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11.5px;
}

.problems-tray-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 2;
}

.problems-tray-table th {
    padding: 6px 12px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    user-select: none;
}

.problems-tray-table th.col-level,
.problems-tray-table td.col-level {
    width: 75px;
}

.problems-tray-table th.col-file,
.problems-tray-table td.col-file {
    width: 150px;
}

.problems-tray-table th.col-line,
.problems-tray-table td.col-line {
    width: 70px;
    text-align: center;
}

.problems-tray-table th.col-msg,
.problems-tray-table td.col-msg {
    width: auto;
}

.problems-tray-table tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.problems-tray-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.problems-tray-package-header-row {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    cursor: default !important;
}

.problems-tray-package-header-cell {
    padding: 0 !important;
}

.pkg-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    background: rgba(0, 0, 0, 0.04);
}

.dark-mode .pkg-header-content {
    background: rgba(255, 255, 255, 0.05);
}

.pkg-header-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.pkg-header-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}

.pkg-header-badge.badge-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.pkg-header-badge.badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.pkg-header-badge.badge-clean {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.problems-tray-table tbody tr:last-child {
    border-bottom: none;
}

.problems-tray-table tbody tr:hover {
    background-color: var(--hover-bg, rgba(59, 130, 246, 0.07));
}

.dark-mode .problems-tray-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.problems-tray-table td {
    padding: 6px 12px;
    vertical-align: middle;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tray-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    line-height: 1.3;
}

.tray-level-badge.level-fatal {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

.tray-level-badge.level-error {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.tray-level-badge.level-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.tray-level-badge.level-info {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.tray-file-text {
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.tray-line-text {
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.tray-msg-code {
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 2px;
}

.problems-tray-empty {
    padding: 36px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
}

.problems-tray-empty .empty-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.problems-tray-empty .empty-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* --- Notification Panel --- */
.notification-panel {
    position: fixed;
    bottom: 45px;
    right: 12px;
    width: 320px;
    max-height: 400px;
    background: var(--panel-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 60001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panel-slide-up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
}

.dark-mode .notification-panel {
    background: rgba(30, 30, 30, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.notification-header {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.02);
}

.notification-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notification-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.notification-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.notification-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
    transition: background-color 0.2s;
    cursor: pointer;
    align-items: flex-start;
}

.notification-item:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.02));
}

.notification-item.unread {
    background-color: rgba(var(--primary-rgb, 15, 76, 129), 0.04);
}

.notification-item-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.notification-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-item-message {
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.notification-item-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Toast origin micro-animation */
.toast-from-bell {
    animation: toast-fly-in 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes toast-fly-in {
    from {
        transform: translateY(100px) scale(0.3);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Sources Tab Premium Styling */
.workspace-source-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.workspace-source-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

body.dark-mode .workspace-source-card:hover {
    border-color: var(--highlight-color);
}

.workspace-source-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.workspace-source-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-bright);
    font-weight: 600;
}

.workspace-source-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.workspace-source-actions {
    display: flex;
    gap: 8px;
}

.workspace-source-note-section {
    margin: var(--spacing-xs) 0;
}

.workspace-source-note-input {
    width: 100%;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    resize: none;
    transition: border-color var(--transition-speed);
}

.workspace-source-note-input:focus {
    border-color: var(--primary-color);
    outline: none;
}

body.dark-mode .workspace-source-note-input:focus {
    border-color: var(--highlight-color);
}

.workspace-pagemap-section {
    border-top: 1px dashed var(--border-color);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.workspace-pagemap-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.workspace-pagemap-table-header {
    display: flex;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-bottom: none;
    padding: 6px 10px;
    gap: 10px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.workspace-pagemap-row {
    display: flex;
    gap: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    align-items: center;
    margin-top: -1px;
    transition: background-color var(--transition-speed);
}

.workspace-pagemap-row.dragging {
    opacity: 0.5;
    background-color: var(--primary-light);
}

.workspace-pagemap-row:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.workspace-pagemap-row .drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 1.1rem;
    padding: 0 4px;
    user-select: none;
}

.workspace-pagemap-row input,
.workspace-pagemap-row select {
    padding: 4px 8px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-app);
    color: var(--text-primary);
}

.workspace-pagemap-row input:focus,
.workspace-pagemap-row select:focus {
    border-color: var(--primary-color);
    outline: none;
}

/* Proofread Discrepancy Styling */
.proofread-discrepancy[data-status="unresolved"] {
    text-decoration: underline wavy #ff8c00 !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 4px !important;
    cursor: pointer !important;
    background-color: rgba(255, 140, 0, 0.09) !important;
    transition: background-color 0.2s ease, text-decoration-color 0.2s ease !important;
    display: inline !important;
    position: relative !important;
}

.proofread-discrepancy[data-status="unresolved"]:hover,
.proofread-discrepancy[data-status="unresolved"].active {
    background-color: rgba(255, 140, 0, 0.22) !important;
    text-decoration-color: #ff3c00 !important;
}

.proofread-discrepancy[data-status="resolved"] {
    text-decoration: none !important;
    background-color: transparent !important;
    cursor: default !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    animation: none !important;
}

.proofread-discrepancy.insertion-placeholder[data-status="unresolved"] {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid #ff8c00 !important;
    background-color: rgba(255, 140, 0, 0.25) !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
    animation: pulse-discrepancy 2s infinite ease-in-out !important;
}

.proofread-discrepancy.insertion-placeholder[data-status="unresolved"]:hover,
.proofread-discrepancy.insertion-placeholder[data-status="unresolved"].active {
    border-color: #ff3c00 !important;
    background-color: rgba(255, 60, 0, 0.45) !important;
}

@keyframes pulse-discrepancy {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

/* --- Untranslated TOC Entries --- */
.toc-untranslated-link {
    opacity: 0.55 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
    cursor: not-allowed !important;
    filter: grayscale(80%) !important;
    user-select: text;
    transition: opacity 0.2s ease !important;
}

.toc-untranslated-link:hover {
    opacity: 0.8 !important;
}

.toc-untranslated-link .toc-text,
.toc-untranslated-link .toc-page {
    text-decoration: line-through !important;
}

/* --- EPUB Export Validation Report Modal Table --- */
.epub-validation-scroll-container {
    max-height: 380px;
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: var(--panel-bg, #ffffff);
}

.epub-validation-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    table-layout: fixed;
}

.epub-validation-modal-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #1e293b);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    white-space: nowrap;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epub-validation-modal-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epub-validation-modal-table .col-level {
    width: 90px;
    white-space: nowrap;
    text-align: center;
}

.epub-validation-modal-table .col-file {
    width: 220px;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epub-validation-modal-table .col-linecol {
    width: 85px;
    white-space: nowrap;
    text-align: center;
}

.epub-validation-modal-table .col-message {
    width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.epub-validation-modal-table .lvl-badge {
    display: inline-block;
    font-weight: 700;
    font-size: 0.8em;
    padding: 2px 6px;
    border-radius: 4px;
    text-align: center;
}

.epub-validation-modal-table .lvl-fatal,
.epub-validation-modal-table .lvl-error {
    color: #dc2626;
    background: #fee2e2;
}

.epub-validation-modal-table .lvl-warning {
    color: #d97706;
    background: #fef3c7;
}

.epub-validation-modal-table .lvl-info {
    color: #2563eb;
    background: #dbeafe;
}

/* Dark mode overrides for EPUB Validation Report Modal Table */
body.dark-mode .epub-validation-scroll-container,
body[data-theme="dark"] .epub-validation-scroll-container {
    border-color: var(--border-color, #334155);
    background: var(--panel-bg, #0f172a);
}

body.dark-mode .epub-validation-modal-table thead th,
body[data-theme="dark"] .epub-validation-modal-table thead th {
    background: var(--sidebar-bg, #1e293b);
    color: var(--text-primary, #f8fafc);
    border-bottom-color: var(--border-color, #475569);
}

body.dark-mode .epub-validation-modal-table tbody td,
body[data-theme="dark"] .epub-validation-modal-table tbody td {
    border-bottom-color: var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #e2e8f0);
}

body.dark-mode .epub-validation-modal-table .lvl-fatal,
body.dark-mode .epub-validation-modal-table .lvl-error,
body[data-theme="dark"] .epub-validation-modal-table .lvl-fatal,
body[data-theme="dark"] .epub-validation-modal-table .lvl-error {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
}

body.dark-mode .epub-validation-modal-table .lvl-warning,
body[data-theme="dark"] .epub-validation-modal-table .lvl-warning {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.2);
}

body.dark-mode .epub-validation-modal-table .lvl-info,
body[data-theme="dark"] .epub-validation-modal-table .lvl-info {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.2);
}

/* --- Workbench Native EPUB Reader Pane --- */
.pane.preview-pane {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    background: var(--bg-viewer, #ffffff);
    overflow: hidden;
    z-index: 1;
}

body.dark-mode .pane.preview-pane,
body[data-theme="dark"] .pane.preview-pane {
    background: var(--bg-viewer, #0f172a);
}

.pane.preview-pane .pane-header {
    height: 38px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sidebar-bg, #f8fafc);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
    user-select: none;
}

body.dark-mode .pane.preview-pane .pane-header,
body[data-theme="dark"] .pane.preview-pane .pane-header {
    background: var(--sidebar-bg, #1e293b);
    border-bottom-color: var(--border-color, #334155);
}

.preview-pane-commit-badge {
    font-size: 10.5px;
    font-family: 'JetBrains Mono', Consolas, Monaco, monospace;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    border: 1px solid rgba(59, 130, 246, 0.25);
    margin-left: 6px;
    font-weight: 500;
}

.dark-mode .preview-pane-commit-badge {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
}

.btn-nav-preview {

    background: var(--bg-tertiary, #f1f5f9);
    color: var(--primary-color, #4f46e5);
    border: 1px solid var(--border-color, #cbd5e1);
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

.btn-nav-preview:hover {
    background: var(--primary-light, #e0e7ff);
    color: var(--primary-color, #4338ca);
    border-color: var(--primary-color, #818cf8);
}

body.dark-mode .btn-nav-preview,
body[data-theme="dark"] .btn-nav-preview {
    background: rgba(255, 255, 255, 0.06);
    color: #a5b4fc;
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .btn-nav-preview:hover,
body[data-theme="dark"] .btn-nav-preview:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: #6366f1;
}

.btn-primary-action {

    background: linear-gradient(135deg, var(--primary-color, #4f46e5), #6366f1);
    color: #ffffff;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-action:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
    transform: translateY(-1px);
}

.btn-secondary-action {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-color, #1e293b);
    border: 1px solid var(--border-color, #cbd5e1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-action:hover {
    background: var(--bg-hover, #e2e8f0);
    border-color: var(--text-muted, #94a3b8);
}

.publication-hero-card {
    transition: all 0.2s ease;
}

body.dark-mode .publication-hero-card,
body[data-theme="dark"] .publication-hero-card {
    background: var(--card-bg, #1e293b) !important;
    border-color: var(--border-color, #334155) !important;
}

.snapshots-pagination-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
   Add Target Language Modal Styles
   ========================================================================== */
.add-lang-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease-out;
}

.add-lang-modal-card {
    background: var(--bg-panel, #ffffff);
    color: var(--text-primary, #0f172a);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 12px;
    width: 90%;
    max-width: 540px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleUp 0.15s ease-out;
}

body.dark-mode .add-lang-modal-card {
    background: var(--bg-panel, #1e293b);
    border-color: var(--border-color, #334155);
    color: var(--text-primary, #f8fafc);
}

.add-lang-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

body.dark-mode .add-lang-modal-header {
    border-color: var(--border-color, #334155);
}

.add-lang-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-lang-header-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.add-lang-close-btn {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 6px;
    transition: all 0.15s ease;
}

.add-lang-close-btn:hover {
    color: var(--text-primary, #0f172a);
    background: var(--bg-hover, rgba(0, 0, 0, 0.06));
}

body.dark-mode .add-lang-close-btn:hover {
    color: var(--text-primary, #f8fafc);
    background: var(--bg-hover, rgba(255, 255, 255, 0.08));
}

.add-lang-modal-body {
    padding: 18px 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.add-lang-description {
    margin: 0 0 14px 0;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    line-height: 1.4;
}

body.dark-mode .add-lang-description {
    color: var(--text-secondary, #94a3b8);
}

.add-lang-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.add-lang-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    text-align: left;
}

body.dark-mode .add-lang-chip {
    background: var(--bg-tertiary, #0f172a);
    border-color: var(--border-color, #334155);
    color: var(--text-primary, #f1f5f9);
}

.add-lang-chip:hover:not(.disabled) {
    border-color: var(--primary-color, #0284c7);
    background: var(--bg-hover, #e2e8f0);
}

body.dark-mode .add-lang-chip:hover:not(.disabled) {
    background: var(--bg-hover, #1e293b);
    border-color: var(--primary-color, #38bdf8);
}

.add-lang-chip.selected {
    border-color: var(--primary-color, #0284c7) !important;
    background: rgba(2, 132, 199, 0.12) !important;
    font-weight: 600;
    color: var(--primary-color, #0284c7) !important;
    box-shadow: 0 0 0 1px var(--primary-color, #0284c7);
}

body.dark-mode .add-lang-chip.selected {
    border-color: var(--primary-color, #38bdf8) !important;
    background: rgba(56, 189, 248, 0.15) !important;
    color: var(--primary-color, #38bdf8) !important;
    box-shadow: 0 0 0 1px var(--primary-color, #38bdf8);
}

.add-lang-chip.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

.add-lang-chip-code {
    font-size: 11px;
    padding: 2px 5px;
    background: var(--bg-panel, rgba(0, 0, 0, 0.06));
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    color: var(--text-secondary, #64748b);
}

body.dark-mode .add-lang-chip-code {
    background: var(--bg-panel, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, #94a3b8);
}

.add-lang-chip-added {
    font-size: 10px;
    color: var(--success-color, #10b981);
    font-weight: 600;
}

.add-lang-custom-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

body.dark-mode .add-lang-custom-section {
    border-color: var(--border-color, #334155);
}

.add-lang-custom-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary, #64748b);
}

body.dark-mode .add-lang-custom-label {
    color: var(--text-secondary, #94a3b8);
}

.add-lang-custom-input-row {
    display: flex;
    gap: 8px;
}

.add-lang-input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-input, #ffffff);
    color: var(--text-primary, #0f172a);
    outline: none;
    transition: all 0.15s ease;
}

body.dark-mode .add-lang-input {
    background: var(--bg-input, #0f172a);
    border-color: var(--border-color, #334155);
    color: var(--text-primary, #f8fafc);
}

.add-lang-input:focus {
    border-color: var(--primary-color, #0284c7);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}

body.dark-mode .add-lang-input:focus {
    border-color: var(--primary-color, #38bdf8);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
}

.add-lang-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-tertiary, #f8fafc);
}

body.dark-mode .add-lang-modal-footer {
    border-color: var(--border-color, #334155);
    background: var(--bg-tertiary, #0f172a);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

/* =========================================================
   WORKBENCH TAB BAR & TAB STYLING
   ========================================================= */

.workbench-tab-bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 35px;
    min-height: 35px;
    background: var(--bg-sidebar, #f1f5f9);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    padding: 0;
    margin: 0;
    user-select: none;
    overflow: visible;
    position: relative;
    z-index: 100;
    box-sizing: border-box;
}

.workbench-tab-bar::-webkit-scrollbar {
    display: none;
}

.workbench-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0;
    margin: 0;
}

.workbench-tabs::-webkit-scrollbar {
    display: none;
}

.workbench-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    max-width: 240px;
    padding: 0 10px 0 10px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-color, #e2e8f0);
    border-top: 2px solid transparent;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    box-sizing: border-box;
    margin-bottom: -1px;
    transition: background 0.12s ease, color 0.12s ease;
}

.workbench-tab:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #0f172a);
}

.workbench-tab.active {
    background: var(--panel-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    font-weight: 500;
    border-right: 1px solid var(--border-color, #e2e8f0);
    border-top: 2px solid var(--primary-color, #0f4c81);
    border-bottom: 1px solid var(--panel-bg, #ffffff);
    box-shadow: none;
    z-index: 2;
}

.workbench-tab.tab-open-inactive {
    background: var(--panel-bg, #ffffff);
    color: var(--text-secondary, #64748b);
    font-weight: 400;
    border-right: 1px solid var(--border-color, #e2e8f0);
    border-top: 2px solid transparent;
    border-bottom: 1px solid var(--panel-bg, #ffffff);
    box-shadow: none;
    z-index: 1;
}

.workbench-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 1px;
    position: relative;
    flex-shrink: 0;
}

.workbench-tab-icon.nav-document::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -3px;
    width: 5px;
    height: 5px;
    background-color: #10b981;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

body.dark-mode .workbench-tab-icon.nav-document::after {
    border-color: #252525;
    box-shadow: none;
}

.workbench-tab-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}

.workbench-tab-stage-badge,
.workbench-tab-package-badge {
    font-size: 9.5px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #f1f5f9;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.workbench-tab.active .workbench-tab-stage-badge,
.workbench-tab.active .workbench-tab-package-badge {
    background: #e2e8f0;
    color: #334155;
}

.tab-dirty-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #e28413;
    margin-left: 4px;
    margin-right: 2px;
    flex-shrink: 0;
    user-select: none;
}

body.dark-mode .tab-dirty-indicator {
    color: #f59e0b;
}

.tab-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    margin-left: 3px;
    opacity: 0;
    pointer-events: auto;
    flex-shrink: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.workbench-tab.active .tab-close-btn {
    opacity: 0.7;
}

.workbench-tab:hover .tab-close-btn,
.workbench-tab.active:hover .tab-close-btn {
    opacity: 1;
}

.tab-close-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #0f172a;
}

body.dark-mode .tab-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.workbench-tab-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding-right: 6px;
    position: relative;
    overflow: visible;
    z-index: 101;
}

/* =========================================================
   SPLIT VIEW & EDITOR GROUPS LAYOUT
   ========================================================= */

.workbench-editor-groups {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: var(--bg-color);
}

.workbench-editor-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 200px;
    min-height: 0;
    overflow: hidden;
    position: relative;
    border-right: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-app, #ffffff);
}

.workbench-editor-group:last-child {
    border-right: none;
}

.workbench-editor-group.active-group {
    box-shadow: inset 0 0 0 1px var(--primary-light, rgba(15, 76, 129, 0.2));
}

.workbench-editor-group .workbench-tab-bar {
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.workbench-group-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: var(--bg-viewer, #ffffff);
}

.editor-group-resizer {
    width: 4px;
    cursor: col-resize;
    background-color: var(--border-color, #e2e8f0);
    transition: background-color var(--transition-speed);
    z-index: 30000;
    flex-shrink: 0;
    position: relative;
    touch-action: none;
}

.editor-group-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    right: -4px;
    z-index: 10;
    cursor: col-resize;
}

.editor-group-resizer:hover,
.editor-group-resizer.active,
.editor-group-resizer.resizing {
    background-color: var(--primary-color, #0f4c81);
}

.source-pane {
    background: var(--bg-app, #ffffff);
    border-right: 1px solid var(--border-color, #e2e8f0);
}


/* Sidebar View Switcher & Pipeline Dashboard */
.sidebar-view-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-tab-btn {
    background: transparent;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    color: var(--text-muted, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.sidebar-tab-btn:hover {
    color: var(--text-color, #222);
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.sidebar-tab-btn.active {
    color: var(--primary-color, #2563eb);
    background: var(--primary-bg-subtle, rgba(37, 99, 235, 0.08));
}

.sidebar-content-view {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.pipeline-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pipeline-dashboard {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.pipeline-summary-card {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 8px 10px;
}

.pipeline-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    gap: 4px;
}

.pipeline-stat .stat-value {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color, #1e293b);
}

.pipeline-stat .stat-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.pipeline-stale-banner {
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 4px;
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pipeline-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pipeline-search-box {
    display: flex;
    gap: 4px;
}

.pipeline-search-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 4px;
    background: var(--bg-primary, #ffffff);
    color: var(--text-color, #1e293b);
}

.pipeline-refresh-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #64748b);
}

.pipeline-filter-chips {
    display: flex;
    gap: 4px;
}

.filter-chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: all 0.15s ease;
}

.filter-chip.active {
    background: var(--primary-color, #2563eb);
    color: white;
    border-color: var(--primary-color, #2563eb);
}

.pipeline-segment-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pipeline-segment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-primary, #ffffff);
    cursor: pointer;
    transition: background 0.12s ease;
}

.pipeline-segment-row:hover {
    background: var(--bg-hover, #f1f5f9);
}

.pipeline-segment-row .segment-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    padding-right: 6px;
}

.pipeline-segment-row .segment-name {
    font-size: 12px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-color, #1e293b);
}

.pipeline-segment-row .segment-section {
    font-size: 10px;
    color: var(--text-muted, #64748b);
}

.segment-stage-pills {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.stage-pill {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: transparent;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.12s ease;
}

.stage-pill.complete {
    background: #10b981;
    color: white;
    border-color: #059669;
}

.stage-pill.stale {
    background: #f59e0b;
    color: white;
    border-color: #d97706;
}

.stage-pill.empty {
    border-style: dashed;
    opacity: 0.6;
}

.pipeline-loading, .pipeline-error, .pipeline-empty {
    padding: 20px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Multi-Package Explorer Styles */
.package-root-node {
    font-weight: 400;
    font-size: inherit;
    color: var(--text-primary);
    border-radius: var(--radius-sm, 4px);
    margin-bottom: 2px;
}

.package-icon {
    color: #6366f1 !important;
}

.package-root-node[data-id*="digitized"] .package-icon,
.package-root-node[data-id*="base"] .package-icon {
    color: #10b981 !important;
}

.package-root-node[data-id*="annotated"] .package-icon {
    color: #f59e0b !important;
}

.package-root-node[data-id*="translated"] .package-icon {
    color: #3b82f6 !important;
}

.publication-icon {
    color: #6366f1 !important;
}

.publication-root-node {
    font-weight: 400;
    font-size: inherit;
    color: var(--text-primary);
    margin-bottom: 3px;
}

/* Tab Actions Dropdown Menu */
.tab-menu-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tab-actions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    width: max-content;
    white-space: nowrap;
    background: var(--panel-bg, #ffffff);
    color: var(--text-primary, #1e293b);
    backdrop-filter: blur(var(--backdrop-blur, 8px));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    padding: 4px;
    z-index: 99999;
    font-size: 0.88rem;
    animation: fadeIn 0.1s ease-out;
}

.tab-dropdown-item {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    gap: 16px;
    color: var(--text-primary, #1e293b);
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tab-dropdown-item:hover {
    background-color: var(--primary-light, #eff6ff);
    color: var(--primary-color, #2563eb);
}

.tab-dropdown-label {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.tab-dropdown-shortcut {
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    margin-left: auto;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.tab-dropdown-item:hover .tab-dropdown-shortcut {
    color: inherit;
    opacity: 1;
}

body.dark-mode .tab-actions-dropdown {
    background-color: var(--panel-bg, #1e293b);
    border-color: var(--border-color, #334155);
    color: var(--text-primary, #f8fafc);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
}

body.dark-mode .tab-dropdown-item:hover {
    background-color: var(--primary-light, rgba(37, 99, 235, 0.2));
    color: var(--primary-color, #38bdf8);
}

.tab-dropdown-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 4px 0;
}

body.dark-mode .tab-dropdown-divider {
    background: #334155;
}

.tab-dropdown-header {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #94a3b8);
    padding: 6px 12px 4px 12px;
    user-select: none;
}

.tab-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
}

.tab-dropdown-item.tab-item-active {
    font-weight: 600;
    background: var(--primary-bg-subtle, rgba(37, 99, 235, 0.08));
    color: var(--primary-color, #2563eb);
}

body.dark-mode .tab-dropdown-item.tab-item-active {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

.tab-dropdown-check {
    width: 16px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color, #2563eb);
}

body.dark-mode .tab-dropdown-check {
    color: #38bdf8;
}

.tab-dropdown-item.tab-dropdown-open-tab {
    gap: 8px;
    padding: 6px 8px 6px 10px;
}

.tab-dropdown-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    margin-left: auto;
    opacity: 0.6;
    flex-shrink: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tab-dropdown-item:hover .tab-dropdown-close-btn {
    opacity: 0.85;
}

.tab-dropdown-close-btn:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary, #0f172a);
}

body.dark-mode .tab-dropdown-close-btn,
:root[data-theme="dark"] .tab-dropdown-close-btn {
    color: var(--text-secondary, #94a3b8);
}

body.dark-mode .tab-dropdown-close-btn:hover,
:root[data-theme="dark"] .tab-dropdown-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* =========================================================
   WORKBENCH TAB BAR & NEW UI - DARK MODE STYLES
   ========================================================= */

body.dark-mode .workbench-tab-bar,
:root[data-theme="dark"] .workbench-tab-bar {
    background: #18181b;
    border-bottom: 1px solid #27272a;
}

body.dark-mode .workbench-tab,
:root[data-theme="dark"] .workbench-tab {
    background: #18181b;
    border-right: 1px solid #27272a;
    border-top: 2px solid transparent;
    color: #94a3b8;
}

body.dark-mode .workbench-tab:hover,
:root[data-theme="dark"] .workbench-tab:hover {
    background: #27272a;
    color: #f4f4f5;
}

body.dark-mode .workbench-tab.active,
:root[data-theme="dark"] .workbench-tab.active {
    background: var(--panel-bg, #1e1e1e);
    border-top: 2px solid #38bdf8;
    border-right: 1px solid #27272a;
    border-bottom: 1px solid var(--panel-bg, #1e1e1e);
    color: #ffffff;
    box-shadow: none;
}

body.dark-mode .workbench-tab.tab-open-inactive,
:root[data-theme="dark"] .workbench-tab.tab-open-inactive {
    background: var(--panel-bg, #1e1e1e);
    border-top: 2px solid transparent;
    border-right: 1px solid #27272a;
    border-bottom: 1px solid var(--panel-bg, #1e1e1e);
    color: #94a3b8;
    box-shadow: none;
}

body.dark-mode .workbench-tab-stage-badge,
body.dark-mode .workbench-tab-package-badge,
:root[data-theme="dark"] .workbench-tab-stage-badge,
:root[data-theme="dark"] .workbench-tab-package-badge {
    background: #27272a;
    color: #a1a1aa;
}

body.dark-mode .workbench-tab.active .workbench-tab-stage-badge,
body.dark-mode .workbench-tab.active .workbench-tab-package-badge,
:root[data-theme="dark"] .workbench-tab.active .workbench-tab-stage-badge,
:root[data-theme="dark"] .workbench-tab.active .workbench-tab-package-badge {
    background: #333338;
    color: #e4e4e7;
}

body.dark-mode .tab-close-btn,
:root[data-theme="dark"] .tab-close-btn {
    color: #a1a1aa;
}

body.dark-mode .tab-close-btn:hover,
:root[data-theme="dark"] .tab-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fafafa;
}

body.dark-mode .source-pane,
:root[data-theme="dark"] .source-pane {
    background: var(--bg-app, #1e1e1e);
    border-right-color: var(--border-color, #333333);
}

/* Sidebar & Pipeline Dark Mode */
body.dark-mode .sidebar-tab-btn,
:root[data-theme="dark"] .sidebar-tab-btn {
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .sidebar-tab-btn:hover,
:root[data-theme="dark"] .sidebar-tab-btn:hover {
    color: var(--text-primary, #f4f4f5);
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .sidebar-tab-btn.active,
:root[data-theme="dark"] .sidebar-tab-btn.active {
    color: var(--primary-color, #60a5fa);
    background: rgba(96, 165, 250, 0.15);
}

body.dark-mode .pipeline-summary-card,
:root[data-theme="dark"] .pipeline-summary-card {
    background: var(--bg-card, #27272a);
    border-color: var(--border-color, #3f3f46);
}

body.dark-mode .pipeline-stat .stat-value,
:root[data-theme="dark"] .pipeline-stat .stat-value {
    color: var(--text-bright, #f4f4f5);
}

body.dark-mode .pipeline-stat .stat-label,
:root[data-theme="dark"] .pipeline-stat .stat-label {
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .pipeline-search-input,
:root[data-theme="dark"] .pipeline-search-input {
    background: var(--bg-sidebar, #18181b);
    border-color: var(--border-color, #3f3f46);
    color: var(--text-primary, #f4f4f5);
}

body.dark-mode .pipeline-refresh-btn,
:root[data-theme="dark"] .pipeline-refresh-btn {
    border-color: var(--border-color, #3f3f46);
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .filter-chip,
:root[data-theme="dark"] .filter-chip {
    border-color: var(--border-color, #3f3f46);
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .filter-chip:hover,
:root[data-theme="dark"] .filter-chip:hover {
    background: var(--bg-hover, #3f3f46);
    color: var(--text-primary, #f4f4f5);
}

body.dark-mode .pipeline-segment-row,
:root[data-theme="dark"] .pipeline-segment-row {
    background: var(--bg-sidebar, #18181b);
    border-color: var(--border-color, #27272a);
}

body.dark-mode .pipeline-segment-row:hover,
:root[data-theme="dark"] .pipeline-segment-row:hover {
    background: var(--bg-card, #27272a);
}

body.dark-mode .pipeline-segment-row .segment-name,
:root[data-theme="dark"] .pipeline-segment-row .segment-name {
    color: var(--text-primary, #f4f4f5);
}

body.dark-mode .pipeline-segment-row .segment-section,
:root[data-theme="dark"] .pipeline-segment-row .segment-section {
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .stage-pill,
:root[data-theme="dark"] .stage-pill {
    border-color: var(--border-color, #3f3f46);
    color: var(--text-muted, #a1a1aa);
}

body.dark-mode .package-root-node,
:root[data-theme="dark"] .package-root-node {
    color: var(--text-primary, #f0f0f0);
}

body.dark-mode .tab-actions-dropdown,
:root[data-theme="dark"] .tab-actions-dropdown {
    background: var(--panel-bg, #1e1e1e);
    border-color: var(--border-color, #333333);
    color: var(--text-primary, #f0f0f0);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
}

body.dark-mode .tab-dropdown-item,
:root[data-theme="dark"] .tab-dropdown-item {
    color: var(--text-primary, #f0f0f0);
}

body.dark-mode .tab-dropdown-item:hover,
:root[data-theme="dark"] .tab-dropdown-item:hover {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--primary-color, #60a5fa);
}

body.dark-mode .tab-dropdown-shortcut,
:root[data-theme="dark"] .tab-dropdown-shortcut {
    color: var(--text-secondary, #aaaaaa);
}

/* Top Bottom-Panel Tabs in Dark Mode */
body.dark-mode .bottom-panel-header,
:root[data-theme="dark"] .bottom-panel-header {
    background-color: var(--bg-sidebar, #18181b);
    border-bottom-color: var(--border-color, #27272a);
}

body.dark-mode #bottom-panel-tabs .tab-button,
:root[data-theme="dark"] #bottom-panel-tabs .tab-button {
    color: var(--text-secondary, #a1a1aa);
}

body.dark-mode #bottom-panel-tabs .tab-button:hover,
:root[data-theme="dark"] #bottom-panel-tabs .tab-button:hover {
    color: var(--text-primary, #f4f4f5);
    background-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode #bottom-panel-tabs .tab-button.active,
:root[data-theme="dark"] #bottom-panel-tabs .tab-button.active {
    color: var(--primary-color, #60a5fa);
    border-bottom-color: var(--primary-color, #60a5fa);
    background-color: transparent;
}

/* Skeleton / Ghost Tree Item Styling */
.tree-item.tree-item-skeleton {
    opacity: 0.52;
}

.tree-item.tree-item-skeleton .tree-label {
    opacity: 0.85;
}

.tree-item.tree-item-skeleton .tree-icon {
    opacity: 0.7;
}

.tree-item.tree-item-skeleton:hover {
    opacity: 0.85;
}

/* New Package Modal */
.new-pkg-modal-card {
    max-width: 520px;
    width: 92vw;
    background: var(--bg-primary, #ffffff);
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.new-pkg-modal-body {
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-pkg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.new-pkg-label {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #64748b);
}

.new-pkg-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.new-pkg-type-option {
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition: border-color 0.15s, background-color 0.15s;
}

.new-pkg-type-option input {
    margin-top: 3px;
}

.new-pkg-type-option.selected {
    border-color: var(--accent-color, #3b82f6);
    background-color: var(--accent-bg-subtle, rgba(59, 130, 246, 0.06));
}

.pkg-type-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pkg-type-desc {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
    line-height: 1.3;
}

.new-pkg-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    background: var(--input-bg, #ffffff);
    color: var(--text-primary, #1e293b);
    font-size: 0.9rem;
    box-sizing: border-box;
}

.new-pkg-input:focus {
    border-color: var(--accent-color, #3b82f6);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.new-pkg-options-group {
    background: var(--bg-secondary, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.new-pkg-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-primary, #1e293b);
}

.new-pkg-error-msg {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 4px;
}

.new-pkg-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 24px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}

.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.sidebar-header-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background-color 0.15s;
}

.sidebar-header-btn:hover {
    color: var(--text-primary, #1e293b);
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.05));
}

/* --- Modern SaaS Auth View & Modals --- */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: radial-gradient(circle at 50% 20%, rgba(15, 76, 129, 0.08) 0%, transparent 70%), var(--bg-color, #f8fafc);
}

.auth-card {
    background: var(--panel-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 2.25rem;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: center;
}

.auth-tabs {
    display: flex;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 8px;
    padding: 3px;
    margin: 1.25rem 0;
    gap: 3px;
}

.auth-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.auth-tab.active {
    background: var(--panel-bg, #ffffff);
    color: var(--primary, #0f4c81);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

.auth-form-group {
    text-align: left;
    margin-bottom: 1rem;
}

.auth-form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: var(--text-primary, #334155);
}

.auth-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    background: var(--bg-color, #ffffff);
    color: var(--text-primary, #0f172a);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-input:focus {
    border-color: var(--primary, #0f4c81);
    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.15);
}

.auth-error-banner {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: left;
    display: none;
}

.auth-success-banner {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: left;
    display: none;
}

.auth-info-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.82rem;
    margin-bottom: 1rem;
    text-align: left;
    display: none;
    line-height: 1.4;
}

.auth-divider {
    position: relative;
    margin: 1.25rem 0;
    text-align: center;
}

.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.auth-divider-text {
    position: relative;
    background: var(--panel-bg, #ffffff);
    padding: 0 10px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.org-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, #94a3b8);
    border: 1px solid var(--border-color, #334155);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
}

.role-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 12px;
    background: rgba(15, 76, 129, 0.1);
    color: var(--primary, #0f4c81);
    margin-left: 4px;
}

.role-badge.admin {
    background: rgba(168, 85, 247, 0.12);
    color: #9333ea;
}

.role-badge.platform-admin {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.18), rgba(234, 179, 8, 0.18));
    color: #9333ea;
    border: 1px solid rgba(147, 51, 234, 0.35);
    font-weight: 700;
}

body.dark-mode .role-badge.platform-admin {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.22), rgba(250, 204, 21, 0.22));
    color: #c084fc;
    border-color: rgba(192, 132, 252, 0.45);
}

.btn-report-issue {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
}

.btn-report-issue:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--primary, #0f4c81);
    border-color: var(--primary, #0f4c81);
}

/* Styled Select and Filter Select Controls */
select.styled-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box !important;
    height: 38px !important;
    line-height: 36px !important;
    padding: 0 32px 0 12px !important;
    font-size: 0.88rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 6px;
    background-color: var(--bg-card, #ffffff);
    color: var(--text-primary, #1e293b);
    font-family: inherit;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

select.styled-select:focus {
    border-color: var(--primary-color, #0f4c81);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

select.styled-select.filter-select {
    height: 32px !important;
    line-height: 30px !important;
    font-size: 0.82rem !important;
    padding: 0 28px 0 10px !important;
}

.search-project-input {
    height: 38px !important;
    line-height: 36px !important;
    padding: 0 12px 0 36px !important;
    box-sizing: border-box !important;
    font-size: 0.9rem !important;
}

body.dark-mode select.styled-select {
    background-color: var(--bg-card, #1e293b);
    color: var(--text-primary, #f8fafc);
    border-color: var(--border-color, #334155);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.project-org-badge {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color, #4f46e5);
    border: 1px solid rgba(99, 102, 241, 0.25);
    margin-left: 8px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.dark-mode .project-org-badge {
    background: rgba(129, 140, 248, 0.15);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.35);
}

.project-list-simple {
    display: flex;
    flex-direction: column;
    min-height: 180px;
}