:root { --English-font: 'Inter', sans-serif; --Arabic-font: 'Almarai', sans-serif; } /* ============================================================= LEGALSEEK — PREMIUM BLACK & GOLD THEME TOKENS Single source of truth for color across the whole app. Every component below (app.css, pipeline.css, MudBlazor overrides, *.razor.css) consumes these variables instead of hardcoded hex values. Theming: two explicit blocks below carry the same variable names — one for [data-theme="dark"] (the values that were previously hardcoded directly into :root, unchanged), one for [data-theme="light"]. "html" with no attribute (or any value other than "light") falls back to dark, so dark stays the default with zero JS dependency. TopNav.razor's toggle sets/ removes the attribute and js/theme.js persists the choice. ============================================================= */ html, html[data-theme="dark"] { color-scheme: dark; /* Brand gold (matches the quill-feather logo mark) */ --ls-gold: #C9A227; --ls-gold-soft: #E2C158; --ls-gold-strong: #B68F1D; --ls-gold-muted: #8A7530; --ls-gold-50: rgba(201, 162, 39, 0.08); --ls-gold-100: rgba(201, 162, 39, 0.16); --ls-gold-200: rgba(201, 162, 39, 0.28); /* Rich black / charcoal surfaces */ --ls-bg: #0A0A0C; --ls-bg-raised: #111114; --ls-surface: #17171B; --ls-surface-raised: #1E1E23; --ls-surface-hover: #25252B; --ls-border: #2A2A31; --ls-border-strong: #3A3A43; /* Text */ --ls-text: #F4F1E8; --ls-text-muted: #ADADB8; --ls-text-dim: #75757F; /* Semantic colors, tuned for legibility on dark surfaces */ --ls-success: #3FB67E; --ls-success-50: rgba(63, 182, 126, 0.12); --ls-success-100: rgba(63, 182, 126, 0.22); --ls-warning: #E0A93B; --ls-warning-50: rgba(224, 169, 59, 0.12); --ls-warning-100: rgba(224, 169, 59, 0.22); --ls-error: #E15B5B; --ls-error-50: rgba(225, 91, 91, 0.12); --ls-error-100: rgba(225, 91, 91, 0.22); --ls-info: #5B9FE1; --ls-info-50: rgba(91, 159, 225, 0.12); --ls-info-100: rgba(91, 159, 225, 0.22); /* Generic aliases used by a few legacy components */ --primary: var(--ls-gold); --primary-dark: var(--ls-gold-strong); --error: var(--ls-error); --success: var(--ls-success); /* "Ink" text colors used ON TOP of a solid semantic-colored fill (gold/success/warning/error/info buttons, badges, MudBlazor "filled" variants). Bright/mid-tone fills pair with near-black ink in both themes, so these do not change between themes — only the fills they sit on do. */ --ls-ink-on-gold: #1A1505; --ls-ink-on-success: #08291A; --ls-ink-on-success-strong: #07241A; --ls-ink-on-warning: #2E2106; --ls-ink-on-error: #2b0a0a; --ls-ink-on-error-strong: #2E0A0A; --ls-ink-on-info: #0A1A2E; --ls-ink-on-secondary: #1A1A1D; /* Neutral ink scale used inside .dc-scope (Document Chunker) */ --ls-ink-700: #DCDCE4; --ls-ink-400: #8E8E99; --ls-ink-300: #5C5C66; /* Secondary (MudBlazor "secondary" palette slot) */ --ls-secondary: #B5BAC6; --ls-secondary-darken: #9398A6; --ls-secondary-lighten: #D2D5DD; /* "Needs review" amber accent — distinct from --ls-warning, used only for the ChunkEditor health-summary banner. */ --ls-review-accent: #d97706; --ls-review-accent-text: #b45309; --ls-review-accent-bg: rgba(217, 119, 6, 0.08); /* Small saved/confirmed checkmark green (ChunkImages) */ --ls-check-green: #16a34a; /* Categorical hues — document/chunk "type" badges. Each is a distinct brand-adjacent hue not covered by the semantic success/warning/error/info tokens above. */ --ls-hue-orange: #E07A3B; --ls-hue-orange-text: #E8A56F; --ls-hue-orange-text-strong: #EFAE7C; --ls-hue-orange-bg: rgba(224, 122, 59, 0.16); --ls-hue-orange-bg-soft: rgba(224, 122, 59, 0.14); --ls-hue-purple: #A88BF0; --ls-hue-purple-text: #C2AEF5; --ls-hue-purple-text-strong: #C9B7F5; --ls-hue-purple-bg: rgba(168, 139, 240, 0.16); --ls-hue-purple-bg-soft: rgba(168, 139, 240, 0.14); --ls-hue-pink: #D684AC; --ls-hue-pink-text: #EF9CC0; --ls-hue-pink-bg: rgba(224, 91, 150, 0.16); --ls-hue-teal-text: #7CD9C6; --ls-hue-teal-bg: rgba(63, 182, 161, 0.16); --ls-hue-tan-text: #C9B7A8; --ls-hue-tan-bg: rgba(168, 150, 130, 0.16); --ls-hue-sage-text: #B6D98E; --ls-hue-sage-bg: rgba(141, 184, 92, 0.16); /* Amber tint shared by the "part" & "clause" chunk-type badges (distinct from --ls-warning-100's .22 alpha, used elsewhere) */ --ls-hue-amber-bg: rgba(224, 169, 59, 0.16); --ls-hue-gold2-text: #EFC57C; --ls-success-hover: #59c994; --ls-error-hover: #ff6b6b; /* ── Extra tokens for component-scoped colors (chat bubbles, status pills, dialog surfaces, syntax highlighting, etc.) found across *.razor.css during the light-theme audit. Same rule as above: dark values here are the exact literals that were previously hardcoded in those files — untouched. ── */ /* Gold alpha ladder (brand gold at alpha steps not already covered by --ls-gold-50/100/200) */ --ls-gold-a06: rgba(201, 162, 39, 0.06); --ls-gold-a10: rgba(201, 162, 39, 0.10); --ls-gold-a12: rgba(201, 162, 39, 0.12); --ls-gold-a15: rgba(201, 162, 39, 0.15); --ls-gold-a22: rgba(201, 162, 39, 0.22); --ls-gold-a35: rgba(201, 162, 39, 0.35); --ls-gold-a40: rgba(201, 162, 39, 0.4); --ls-gold-a55: rgba(201, 162, 39, 0.55); /* Chat surface family — ComparisonChat / LiraChat / LawyerReviewChat(2) */ --ls-chat-bg: #101014; --ls-chat-surface: #1D1D22; --ls-chat-surface-2: #202027; --ls-chat-text: #F2F2F5; --ls-chat-error-bg: #7A2E2E; --ls-chat-error-text: #E5A0A0; --ls-chat-error-text-2: #E05252; --ls-chat-success: #2E8B57; --ls-chat-success-a12: rgba(46, 139, 87, 0.12); --ls-chat-success-a22: rgba(46, 139, 87, 0.22); --ls-chat-success-a35: rgba(46, 139, 87, 0.35); --ls-chat-success-a55: rgba(46, 139, 87, 0.55); --ls-chat-danger-2: #F87171; --ls-chat-danger-2-a30: rgba(248, 113, 113, 0.3); --ls-chat-highlight-a03: rgba(255, 255, 255, 0.03); --ls-chat-highlight-a04: rgba(255, 255, 255, 0.04); --ls-chat-highlight-a05: rgba(255, 255, 255, 0.05); --ls-chat-gold-2: #E0A62C; --ls-chat-panel: #1F1F24; /* Status pill family (GitHub-esque) — Admin lists / Pipeline runs */ --ls-status-green: #2ea043; --ls-status-green-bg: rgba(46, 160, 67, 0.15); --ls-status-green-bg-strong: rgba(46, 160, 67, 0.18); --ls-status-red: #db4444; --ls-status-red-bg: rgba(219, 68, 68, 0.15); --ls-status-red-bg-alt: rgba(220, 53, 69, 0.15); --ls-status-red-hover-bg: rgba(220, 80, 80, 0.1); --ls-status-red-hover-bg-strong: rgba(220, 80, 80, 0.12); --ls-status-amber: #db9e44; --ls-status-amber-bg: rgba(219, 158, 68, 0.15); --ls-status-amber-alt: #d9a441; --ls-status-red-alt2: #e5534b; --ls-status-amber2-bg: rgba(210, 153, 34, 0.12); --ls-status-amber2-bg-strong: rgba(210, 153, 34, 0.15); /* Alt gold-tinted badge (distinct rgb from brand gold) */ --ls-gold-bg-alt: rgba(240, 180, 40, 0.12); --ls-gold-bg-alt-soft: rgba(240, 180, 40, 0.1); --ls-gold-bg-alt-border: rgba(240, 180, 40, 0.3); /* Blue hue — MissingInfoAlerts / HelpDesk source badges */ --ls-hue-blue: #5A8CE6; --ls-hue-blue-bg: rgba(90, 140, 230, 0.12); --ls-hue-blue-border: rgba(90, 140, 230, 0.3); --ls-review-accent-bg-strong: rgba(217, 119, 6, 0.12); /* ChunkEditor's own Tailwind-ish duplicate/merge badge family */ --ls-dc-green: #15803d; --ls-dc-green-bg-a: rgba(21, 128, 61, 0.08); --ls-dc-green-bg-b: rgba(21, 128, 61, 0.16); --ls-dc-green-bg-c: rgba(22, 163, 74, 0.12); --ls-dc-green-border: rgba(21, 128, 61, 0.3); --ls-dc-blue: #2563eb; --ls-dc-blue-strong: #1d4ed8; --ls-dc-blue-bg: rgba(37, 99, 235, 0.12); --ls-dc-red: #b91c1c; --ls-dc-red-bg: rgba(220, 38, 38, 0.12); --ls-dc-amber-hover-bg: rgba(180, 83, 9, 0.2); /* PendingAmendments own categorical hues */ --ls-hue-amber2: #E0A050; --ls-hue-amber2-bg: rgba(220, 160, 80, 0.15); --ls-hue-green2: #6FBF73; --ls-hue-green2-bg: rgba(111, 191, 115, 0.08); --ls-hue-green2-bg-strong: rgba(111, 191, 115, 0.25); --ls-hue-red3-bg: rgba(220, 80, 80, 0.08); --ls-hue-red3-bg-b: rgba(220, 80, 80, 0.15); --ls-hue-red3-bg-c: rgba(220, 80, 80, 0.25); /* MyJobs status-pill family */ --ls-job-green: #46c878; --ls-job-green-bg: rgba(70, 200, 120, 0.12); --ls-job-green-bg-b: rgba(70, 200, 120, 0.15); --ls-job-blue: #5aa0ff; --ls-job-blue-bg: rgba(90, 160, 255, 0.15); --ls-job-gray: #999999; --ls-job-gray-bg: rgba(150, 150, 150, 0.15); --ls-job-gold: #d4af37; --ls-job-gold-bg: rgba(212, 175, 55, 0.15); --ls-job-red: #e65050; --ls-job-red-bg: rgba(230, 80, 80, 0.12); --ls-job-red-bg-b: rgba(230, 80, 80, 0.15); --ls-job-orange: #ffa500; --ls-job-orange-bg: rgba(255, 165, 0, 0.15); /* Dialog/panel surface family — Pdf*, SourceCitationPopup, DocumentAttachment, ChunkEditDialog and friends */ --ls-panel-bg: #1c1c1c; --ls-panel-surface: #232328; --ls-panel-surface-2: #26262c; --ls-panel-bg-2: #141416; --ls-panel-accent: #C9A94D; --ls-reconnect-blue: #0087ff; --ls-reconnect-blue-mid: #3b6ea2; --ls-reconnect-blue-soft: #6b9ed2; --ls-hue-violet: #7c5cff; --ls-draft-surface: #16161c; --ls-draft-text-muted: #7A7A85; --ls-draft-text: #EDEDF0; --ls-draft-error-bg: rgba(225, 91, 91, 0.1); --ls-draft-error-bg-b: rgba(225, 91, 91, 0.35); --ls-valid-error: #ff5a5a; --ls-valid-error-a: rgba(255, 90, 90, 0.5); --ls-valid-warn: #ffc832; --ls-valid-warn-a: rgba(255, 200, 50, 0.45); --ls-json-green: #9FD98C; --ls-json-pink: #ff9ec4; --ls-json-amber: #ffce8a; --ls-success-a06: rgba(63, 182, 126, 0.06); --ls-success-a25: rgba(63, 182, 126, 0.25); --ls-success-a30: rgba(63, 182, 126, 0.3); --ls-error-a10: rgba(225, 91, 91, 0.10); --ls-error-a20: rgba(225, 91, 91, 0.2); --ls-console-bg: #0d0d0d; --ls-console-text: #d4d4d4; /* Shadow system -- dark values are the exact literals that were previously hardcoded inline throughout the project (box-shadow: ... rgba(0,0,0,X)), now centralized so light theme can use a softer, warm-tinted recipe instead of heavy black. */ --ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --ls-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --ls-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); --ls-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); --ls-shadow-tight: 0 3px 6px 2px rgba(0, 0, 0, 0.3); --ls-shadow-alert: 0 8px 24px rgba(0, 0, 0, 0.35); --ls-shadow-preview: 0 8px 28px rgba(0, 0, 0, 0.35); --ls-shadow-flyout: 0 12px 32px rgba(0, 0, 0, 0.5); --ls-shadow-flyout-up: 0 -12px 32px rgba(0, 0, 0, 0.35); --ls-shadow-modal-sm: 0 12px 40px rgba(0, 0, 0, 0.4); --ls-shadow-modal-md: 0 20px 60px rgba(0, 0, 0, 0.5); --ls-shadow-modal-lg: 0 24px 64px rgba(0, 0, 0, 0.5); --ls-shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.6); } html[data-theme="light"] { color-scheme: light; /* Brand gold — deepened vs. the dark-mode value so it stays legible as text/links/icons on a light page while still reading as "gold" on filled buttons under dark ink text. */ --ls-gold: #B8860B; --ls-gold-soft: #D9A824; --ls-gold-strong: #8C6508; --ls-gold-muted: #A9842B; --ls-gold-50: rgba(184, 134, 11, 0.08); --ls-gold-100: rgba(184, 134, 11, 0.15); --ls-gold-200: rgba(184, 134, 11, 0.28); /* Warm off-white surfaces (mirrors the warm-black dark scale) */ --ls-bg: white; --ls-bg-raised: #F2F0E8; --ls-surface: #FFFFFF; --ls-surface-raised: #F6F4EC; --ls-surface-hover: #ECE8DA; --ls-border: #E4DFCF; --ls-border-strong: #D2CBB3; /* Text */ --ls-text: #1C1A14; --ls-text-muted: #5C5849; --ls-text-dim: #85806E; /* Semantic colors, deepened slightly for AA-ish contrast on a light page while staying bright enough for dark-ink fills */ --ls-success: #2E9E63; --ls-success-50: rgba(46, 158, 99, 0.10); --ls-success-100: rgba(46, 158, 99, 0.20); --ls-warning: #C08A16; --ls-warning-50: rgba(192, 138, 22, 0.10); --ls-warning-100: rgba(192, 138, 22, 0.20); --ls-error: #D6534F; --ls-error-50: rgba(214, 83, 79, 0.10); --ls-error-100: rgba(214, 83, 79, 0.20); --ls-info: #3E7FC4; --ls-info-50: rgba(62, 127, 196, 0.10); --ls-info-100: rgba(62, 127, 196, 0.20); --primary: var(--ls-gold); --primary-dark: var(--ls-gold-strong); --error: var(--ls-error); --success: var(--ls-success); /* Ink-on-fill stays the same near-black family — the fills above were kept bright/mid-tone enough for it to still work */ --ls-ink-on-gold: #1A1505; --ls-ink-on-success: #08291A; --ls-ink-on-success-strong: #07241A; --ls-ink-on-warning: #2E2106; --ls-ink-on-error: #2b0a0a; --ls-ink-on-error-strong: #2E0A0A; --ls-ink-on-info: #0A1A2E; --ls-ink-on-secondary: #1A1A1D; --ls-ink-700: #2B2A26; --ls-ink-400: #726E5F; --ls-ink-300: #9B9686; --ls-secondary: #9BA3B0; --ls-secondary-darken: #7D8494; --ls-secondary-lighten: #C3C8D2; --ls-review-accent: #B85F04; --ls-review-accent-text: #8A4006; --ls-review-accent-bg: rgba(184, 95, 4, 0.08); --ls-check-green: #158A3F; --ls-hue-orange: #C45A1A; --ls-hue-orange-text: #A34E12; --ls-hue-orange-text-strong: #8A3F0C; --ls-hue-orange-bg: rgba(196, 90, 26, 0.12); --ls-hue-orange-bg-soft: rgba(196, 90, 26, 0.09); --ls-hue-purple: #7C5CE0; --ls-hue-purple-text: #6A47C7; --ls-hue-purple-text-strong: #5B3BAE; --ls-hue-purple-bg: rgba(124, 92, 224, 0.12); --ls-hue-purple-bg-soft: rgba(124, 92, 224, 0.09); --ls-hue-pink: #A62B68; --ls-hue-pink-text: #8F2258; --ls-hue-pink-bg: rgba(196, 53, 120, 0.12); --ls-hue-teal-text: #0B6455; --ls-hue-teal-bg: rgba(20, 140, 120, 0.12); --ls-hue-tan-text: #5A4B38; --ls-hue-tan-bg: rgba(130, 109, 84, 0.14); --ls-hue-sage-text: #3E621D; --ls-hue-sage-bg: rgba(90, 140, 45, 0.14); --ls-hue-amber-bg: rgba(192, 138, 22, 0.14); --ls-hue-gold2-text: #8A6A12; --ls-success-hover: #279E5F; --ls-error-hover: #C23C3C; /* ── Extra tokens: light equivalents (see dark block for design notes) ── */ --ls-gold-a06: rgba(184, 134, 11, 0.05); --ls-gold-a10: rgba(184, 134, 11, 0.08); --ls-gold-a12: rgba(184, 134, 11, 0.10); --ls-gold-a15: rgba(184, 134, 11, 0.12); --ls-gold-a22: rgba(184, 134, 11, 0.18); --ls-gold-a35: rgba(184, 134, 11, 0.30); --ls-gold-a40: rgba(184, 134, 11, 0.32); --ls-gold-a55: rgba(184, 134, 11, 0.45); --ls-chat-bg: #F3F1E7; --ls-chat-surface: #FFFFFF; --ls-chat-surface-2: #F6F4EC; --ls-chat-text: #201C10; --ls-chat-error-bg: #F6D9D6; --ls-chat-error-text: #A23E3E; --ls-chat-error-text-2: #B23434; --ls-chat-success: #1F7A47; --ls-chat-success-a12: rgba(31, 122, 71, 0.10); --ls-chat-success-a22: rgba(31, 122, 71, 0.18); --ls-chat-success-a35: rgba(31, 122, 71, 0.28); --ls-chat-success-a55: rgba(31, 122, 71, 0.45); --ls-chat-danger-2: #C23B3B; --ls-chat-danger-2-a30: rgba(194, 59, 59, 0.22); --ls-chat-highlight-a03: rgba(0, 0, 0, 0.03); --ls-chat-highlight-a04: rgba(0, 0, 0, 0.04); --ls-chat-highlight-a05: rgba(0, 0, 0, 0.05); --ls-chat-gold-2: #A6791A; --ls-chat-panel: #F6F4EC; --ls-status-green: #1F8A3A; --ls-status-green-bg: rgba(31, 138, 58, 0.12); --ls-status-green-bg-strong: rgba(31, 138, 58, 0.15); --ls-status-red: #B83333; --ls-status-red-bg: rgba(184, 51, 51, 0.12); --ls-status-red-bg-alt: rgba(184, 44, 58, 0.12); --ls-status-red-hover-bg: rgba(184, 55, 55, 0.08); --ls-status-red-hover-bg-strong: rgba(184, 55, 55, 0.10); --ls-status-amber: #A6740E; --ls-status-amber-bg: rgba(166, 116, 14, 0.12); --ls-status-amber-alt: #A87A15; --ls-status-red-alt2: #C23B3B; --ls-status-amber2-bg: rgba(166, 116, 14, 0.10); --ls-status-amber2-bg-strong: rgba(166, 116, 14, 0.12); --ls-gold-bg-alt: rgba(181, 121, 15, 0.10); --ls-gold-bg-alt-soft: rgba(181, 121, 15, 0.08); --ls-gold-bg-alt-border: rgba(181, 121, 15, 0.24); --ls-hue-blue: #2E5FA8; --ls-hue-blue-bg: rgba(46, 95, 168, 0.10); --ls-hue-blue-border: rgba(46, 95, 168, 0.24); --ls-review-accent-bg-strong: rgba(184, 95, 4, 0.10); --ls-dc-green: #0F5C2C; --ls-dc-green-bg-a: rgba(15, 92, 44, 0.08); --ls-dc-green-bg-b: rgba(15, 92, 44, 0.14); --ls-dc-green-bg-c: rgba(15, 110, 55, 0.10); --ls-dc-green-border: rgba(15, 92, 44, 0.24); --ls-dc-blue: #1D4ED8; --ls-dc-blue-strong: #1739A6; --ls-dc-blue-bg: rgba(23, 57, 166, 0.10); --ls-dc-red: #991414; --ls-dc-red-bg: rgba(153, 20, 20, 0.10); --ls-dc-amber-hover-bg: rgba(140, 64, 7, 0.16); --ls-hue-amber2: #A66E1E; --ls-hue-amber2-bg: rgba(166, 110, 30, 0.12); --ls-hue-green2: #3F8A45; --ls-hue-green2-bg: rgba(63, 138, 69, 0.08); --ls-hue-green2-bg-strong: rgba(63, 138, 69, 0.20); --ls-hue-red3-bg: rgba(184, 55, 55, 0.07); --ls-hue-red3-bg-b: rgba(184, 55, 55, 0.12); --ls-hue-red3-bg-c: rgba(184, 55, 55, 0.20); --ls-job-green: #2A9457; --ls-job-green-bg: rgba(42, 148, 87, 0.10); --ls-job-green-bg-b: rgba(42, 148, 87, 0.12); --ls-job-blue: #2E6FD6; --ls-job-blue-bg: rgba(46, 111, 214, 0.12); --ls-job-gray: #6B6B6B; --ls-job-gray-bg: rgba(107, 107, 107, 0.12); --ls-job-gold: #9C7A1C; --ls-job-gold-bg: rgba(156, 122, 28, 0.12); --ls-job-red: #B83333; --ls-job-red-bg: rgba(184, 51, 51, 0.10); --ls-job-red-bg-b: rgba(184, 51, 51, 0.12); --ls-job-orange: #B36B00; --ls-job-orange-bg: rgba(179, 107, 0, 0.12); --ls-panel-bg: #FFFFFF; --ls-panel-surface: #F6F4EC; --ls-panel-surface-2: #ECE8DA; --ls-panel-bg-2: #F2F0E8; --ls-panel-accent: #96731A; --ls-reconnect-blue: #0A6FD1; --ls-reconnect-blue-mid: #4A7BA8; --ls-reconnect-blue-soft: #5A8FC2; --ls-hue-violet: #5B3BD9; --ls-draft-surface: #FFFFFF; --ls-draft-text-muted: #6B6656; --ls-draft-text: #211E15; --ls-draft-error-bg: rgba(214, 83, 79, 0.08); --ls-draft-error-bg-b: rgba(214, 83, 79, 0.28); --ls-valid-error: #C23B3B; --ls-valid-error-a: rgba(194, 59, 59, 0.35); --ls-valid-warn: #A6740E; --ls-valid-warn-a: rgba(166, 116, 14, 0.30); --ls-json-green: #2E7D32; --ls-json-pink: #B5306B; --ls-json-amber: #A6650E; --ls-success-a06: rgba(31, 138, 58, 0.05); --ls-success-a25: rgba(31, 138, 58, 0.20); --ls-success-a30: rgba(31, 138, 58, 0.24); --ls-error-a10: rgba(184, 51, 51, 0.08); --ls-error-a20: rgba(184, 51, 51, 0.16); --ls-console-bg: #F6F4EC; --ls-console-text: #2B2A26; /* Soft, warm-tinted shadows (near-black brand-warm rgb(20,16,8) at low alpha) instead of heavy pure-black -- reads as a soft premium lift on a light page rather than a harsh dark smear. */ --ls-shadow-xs: 0 1px 2px rgba(20, 16, 8, 0.06); --ls-shadow-sm: 0 1px 3px rgba(20, 16, 8, 0.08), 0 1px 2px rgba(20, 16, 8, 0.05); --ls-shadow-md: 0 4px 14px rgba(20, 16, 8, 0.10), 0 2px 6px rgba(20, 16, 8, 0.06); --ls-shadow-lg: 0 18px 44px rgba(20, 16, 8, 0.14), 0 4px 12px rgba(20, 16, 8, 0.08); --ls-shadow-tight: 0 3px 6px 2px rgba(20, 16, 8, 0.10); --ls-shadow-alert: 0 8px 24px rgba(20, 16, 8, 0.12); --ls-shadow-preview: 0 8px 28px rgba(20, 16, 8, 0.12); --ls-shadow-flyout: 0 12px 32px rgba(20, 16, 8, 0.14); --ls-shadow-flyout-up: 0 -12px 32px rgba(20, 16, 8, 0.12); --ls-shadow-modal-sm: 0 12px 40px rgba(20, 16, 8, 0.14); --ls-shadow-modal-md: 0 20px 60px rgba(20, 16, 8, 0.16); --ls-shadow-modal-lg: 0 24px 64px rgba(20, 16, 8, 0.16); --ls-shadow-modal: 0 32px 80px rgba(20, 16, 8, 0.18); } html, body { font-family: "Inter", sans-serif; font-optical-sizing: auto; background-color: var(--ls-bg); color: var(--ls-text); color-scheme: inherit; } /* Logo swap: dark theme keeps the existing logo, light theme shows a separate file (add wwwroot/images/logo/logo-light-bg.png — see Sidebar.razor / Login.razor). Default/no-attribute + explicit "dark" both show the dark-bg logo, matching how the rest of the theme defaults. */ .logo-for-light { display: none; } html[data-theme="light"] .logo-for-dark { display: none; } html[data-theme="light"] .logo-for-light { display: inline; } .toggleicon-for-light { display: none; } html[data-theme="light"] .toggleicon-for-dark { display: none; } html[data-theme="light"] .toggleicon-for-light { display: inline; } h1:focus { outline: none; } /* Chat message spans: the backend sends a per-span inline `color` in its formatted-stream response (see TextFormatModel.color / GetSpanStyle in LiraChat.razor, LawyerReviewChat(2).razor, ComparisonChat.razor), tuned for the dark UI -- usually a near-white value. That inline style has higher specificity than any class-based rule, so in light theme it was rendering as pale/white text on a light bubble (invisible). Dark theme keeps the backend's literal color exactly as before; light theme forces the correctly-themed text color instead. */ html[data-theme="light"] .chat-span-text { color: var(--ls-text) !important; } a, .btn-link { color: var(--ls-gold); } .btn-primary { color: var(--ls-ink-on-gold); background-color: var(--ls-gold); border-color: var(--ls-gold-strong); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--ls-bg), 0 0 0 0.25rem var(--ls-gold-200); } /* Generic helper used by a couple of dialog components for a solid brand-colored bar/badge background. */ .primarybgcolor { background-color: var(--ls-gold) !important; } .content { padding-top: 1.1rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ls-success); } .invalid { outline: 1px solid var(--ls-error); } .validation-message { color: var(--ls-error); } #blazor-error-ui { color-scheme: light only; background: #2A2106; color: var(--ls-text); border-top: 1px solid var(--ls-gold-200); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #7A2222; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: var(--ls-border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--ls-gold); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; color: var(--ls-text); inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: var(--ls-gold-soft); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .addbtn { margin-top: 2px; background-color: var(--ls-gold); color: var(--ls-ink-on-gold); height: 37px; padding: 0px 20px 0px 20px; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; cursor: pointer; text-align: center; transition: background-color 0.15s ease; } .addbtn:hover:not(:disabled) { background-color: var(--ls-gold-soft); } .backbtn { margin-top: 2px; border: 1px var(--ls-gold) solid; color: var(--ls-gold); background-color: transparent; height: 37px; padding: 0px 20px 0px 20px; border-radius: 5px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; cursor: pointer; text-align: center; transition: background-color 0.15s ease, color 0.15s ease; } .backbtn:hover:not(:disabled) { background-color: var(--ls-gold-50); } .backbtn:disabled, .addbtn:disabled { opacity: 0.7; cursor: not-allowed; } .small-label .mud-input-label { font-size: 14px !important; } .small-label input { font-size: 14px !important; } .small-label .mud-input-slot input::placeholder { font-size: 14px !important; } .mud-input-slot { font-size: 14px !important; } .mudblazor-rtl-fix .mud-input-label { width: 100%; text-align: inherit !important; } [dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, [dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol { transform-origin: top right !important; } [dir="rtl"] .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, [dir="rtl"] .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(-14px, -6px) scale(0.75) !important; } [dir="rtl"] .mud-input-label-outlined.mud-input-label-margin-dense { transform: translate(0px, 12px) scale(1) !important; } /* ================================================================= DOCUMENT CHUNKER — PREMIUM ENTERPRISE AI PLATFORM DESIGN SYSTEM ================================================================= */ .dc-scope { --dc-bg: var(--ls-bg); --dc-surface: var(--ls-surface); --dc-surface-raised: var(--ls-surface-raised); --dc-border: var(--ls-border); --dc-border-strong: var(--ls-border-strong); --primary: var(--ls-gold); --dc-ink-900: var(--ls-text); --dc-ink-700: var(--ls-ink-700); --dc-ink-500: var(--ls-text-muted); --dc-ink-400: var(--ls-ink-400); --dc-ink-300: var(--ls-ink-300); --dc-accent: var(--ls-gold); --dc-accent-600: var(--ls-gold-soft); --dc-accent-50: var(--ls-gold-50); --dc-accent-100: var(--ls-gold-100); --dc-accent-ring: var(--ls-gold-200); --dc-success: var(--ls-success); --dc-success-50: var(--ls-success-50); --dc-success-100: var(--ls-success-100); --dc-warning: var(--ls-warning); --dc-warning-50: var(--ls-warning-50); --dc-warning-100: var(--ls-warning-100); --dc-error: var(--ls-error); --dc-error-50: var(--ls-error-50); --dc-error-100: var(--ls-error-100); --dc-info: var(--ls-info); --dc-info-50: var(--ls-info-50); --dc-radius-sm: 8px; --dc-radius-md: 12px; --dc-radius-lg: 16px; --dc-radius-xl: 20px; --dc-radius-pill: 999px; --dc-shadow-xs: var(--ls-shadow-xs); --dc-shadow-sm: var(--ls-shadow-sm); --dc-shadow-md: var(--ls-shadow-md); --dc-shadow-lg: var(--ls-shadow-lg); --dc-shadow-focus: 0 0 0 4px var(--dc-accent-ring); --dc-ease: cubic-bezier(0.16, 1, 0.3, 1); --dc-ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--dc-ink-700); background: var(--dc-bg); -webkit-font-smoothing: antialiased; } .dc-scope * { box-sizing: border-box; } /* ================================================================= LAYOUT SHELL ================================================================= */ .app-container { max-width: 100%; margin: 0 auto; /*padding: 2rem 1.5rem 4rem;*/ min-height: 100vh; } .app-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.25rem 0.25rem 2rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--dc-border); } .app-header .header-text { display: flex; align-items: flex-start; gap: 0.9rem; } .app-header .header-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--dc-radius-md); background: linear-gradient(155deg, var(--ls-gold-soft) 0%, var(--ls-gold-strong) 100%); box-shadow: 0 6px 16px rgba(201, 162, 39, 0.28); color: var(--ls-ink-on-gold); } .app-header .header-mark svg { width: 22px; height: 22px; } .app-header h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; color: var(--dc-ink-900); margin: 0 0 0.2rem; line-height: 1.25; } .app-header p { color: var(--dc-ink-500); font-size: 0.9rem; margin: 0; } .app-header .header-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .dc-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: var(--dc-radius-pill); font-size: 0.78rem; font-weight: 560; border: 1px solid var(--dc-border); background: var(--dc-surface); color: var(--dc-ink-500); white-space: nowrap; } /* Step rail */ .dc-steps { display: flex; align-items: center; gap: 0; margin-bottom: 2rem; padding: 0 0.25rem; overflow-x: auto; } .dc-step { display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0; } .dc-step-dot { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.72rem; font-weight: 650; background: var(--dc-surface); border: 1.5px solid var(--dc-border-strong); color: var(--dc-ink-400); transition: all 0.25s var(--dc-ease); } .dc-step.done .dc-step-dot { background: var(--dc-success); border-color: var(--dc-success); color: white; } .dc-step.active .dc-step-dot { background: var(--dc-accent); border-color: var(--dc-accent); color: var(--ls-ink-on-gold); box-shadow: 0 0 0 4px var(--dc-accent-ring); } .dc-step-label { font-size: 0.82rem; font-weight: 540; color: var(--dc-ink-400); white-space: nowrap; } .dc-step.active .dc-step-label, .dc-step.done .dc-step-label { color: var(--dc-ink-700); } .dc-step-connector { width: 32px; height: 1.5px; background: var(--dc-border-strong); margin: 0 0.65rem; flex-shrink: 0; transition: background 0.25s var(--dc-ease); } .dc-step-connector.done { background: var(--dc-success); } /* ================================================================= BUTTONS ================================================================= */ .btn-primary, .btn-secondary, .btn-browse, .btn-upload, .btn-icon, .btn-success, .btn-add, .btn-download, .btn-undo, .btn-delete, .btn-edit-toggle, .btn-remove { font-family: inherit; } .btn-primary, .btn-secondary, .btn-success, .btn-add, .btn-download { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-weight: 580; cursor: pointer; transition: transform 0.15s var(--dc-ease), box-shadow 0.15s var(--dc-ease), background 0.15s var(--dc-ease), border-color 0.15s var(--dc-ease), opacity 0.15s var(--dc-ease); border: 1px solid transparent; white-space: nowrap; } .btn-primary svg, .btn-secondary svg, .btn-success svg, .btn-add svg, .btn-download svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-primary { background: var(--ls-gold); color: var(--ls-ink-on-gold); box-shadow: var(--dc-shadow-xs); } .btn-primary:hover:not(:disabled):not(.disabled) { background: var(--ls-gold-soft); box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3); transform: translateY(-1px); } .btn-primary:active:not(:disabled):not(.disabled) { transform: translateY(0); } .btn-primary:disabled, .btn-primary.disabled { background: var(--dc-ink-300); color: var(--dc-ink-500); opacity: 1; cursor: not-allowed; box-shadow: none; } .btn-secondary { background: transparent; color: var(--ls-gold); border-color: var(--ls-gold-muted); } .btn-secondary:hover:not(:disabled) { background: var(--ls-gold-50); border-color: var(--ls-gold); } .btn-success { background: var(--dc-success); color: var(--ls-ink-on-success); } .btn-success:hover:not(:disabled) { background: var(--ls-success-hover); transform: translateY(-1px); box-shadow: var(--dc-shadow-sm); } .btn-danger, .btn-discard { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-weight: 580; cursor: pointer; font-family: inherit; transition: transform 0.15s var(--dc-ease), box-shadow 0.15s var(--dc-ease), background 0.15s var(--dc-ease), border-color 0.15s var(--dc-ease), opacity 0.15s var(--dc-ease); white-space: nowrap; } .btn-danger svg, .btn-discard svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-danger { background: var(--dc-error); color: var(--ls-ink-on-error); border: 1px solid transparent; } .btn-danger:hover:not(:disabled) { background: var(--ls-error-hover); transform: translateY(-1px); box-shadow: var(--dc-shadow-sm); } .btn-danger:disabled { opacity: 0.55; cursor: not-allowed; } .btn-discard { background: transparent; color: var(--dc-error); border: 1px solid var(--dc-error-100); } .btn-discard:hover:not(:disabled) { background: var(--dc-error-50); border-color: var(--dc-error); } .btn-add { background: transparent; color: var(--dc-success); border-color: var(--dc-success-100); } .btn-add:hover { background: var(--dc-success-50); border-color: var(--dc-success); } .btn-download { background: var(--ls-gold); color: var(--ls-ink-on-gold); } .btn-download:hover { background: var(--ls-gold-soft); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(201, 162, 39, 0.3); } .btn-upload { width: 100%; justify-content: center; padding: 0.875rem; font-size: 0.95rem; margin-top: 1.5rem; border-radius: var(--dc-radius-sm); } .btn-upload svg { width: 25px; height: 25px; flex-shrink: 0; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm); cursor: pointer; color: var(--dc-ink-500); transition: all 0.15s var(--dc-ease); } .btn-icon:hover { background: var(--dc-surface-raised); color: var(--ls-gold); } .btn-remove { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: 50%; color: var(--dc-ink-400); cursor: pointer; transition: all 0.15s var(--dc-ease); flex-shrink: 0; } .btn-remove:hover { color: var(--dc-error); border-color: var(--dc-error-100); background: var(--dc-error-50); } .btn-remove svg { width: 14px; height: 14px; } /* ================================================================= UPLOAD SECTION ================================================================= */ .upload-section { display: flex; justify-content: center; padding: 1.5rem 0; } .upload-card { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-xl); padding: 2.75rem; width: 100%; max-width: 760px; box-shadow: var(--dc-shadow-md); } .upload-icon { display: none; } .upload-card-intro { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; } .upload-card-glyph { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--dc-radius-md); background: var(--dc-accent-50); color: var(--dc-accent); } .upload-card-glyph svg { width: 24px; height: 24px; } .upload-card h2 { font-size: 1.2rem; font-weight: 620; color: var(--dc-ink-900); margin: 0 0 0.2rem; letter-spacing: -0.01em; } .subtitle { color: var(--dc-ink-500); font-size: 0.875rem; margin: 0; } .click-zone, .drop-zone { border: 1.5px dashed var(--dc-border-strong); border-radius: var(--dc-radius-lg); padding: 2.25rem 2rem; transition: all 0.2s var(--dc-ease); cursor: pointer; text-align: center; background: var(--dc-bg); } .click-zone:hover, .drop-zone.drag-over { border-color: var(--dc-accent); background: var(--dc-accent-50); } .click-content, .drop-content { display: flex; flex-direction: column; align-items: center; } .click-content .big-icon, .drop-content .big-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--dc-radius-md); background: var(--dc-surface); border: 1px solid var(--dc-border); color: var(--dc-ink-400); margin-bottom: 1rem; } .click-content .big-icon svg, .drop-content .big-icon svg { width: 24px; height: 24px; } .click-text, .drop-text { font-size: 0.95rem; font-weight: 540; color: var(--dc-ink-700); margin: 0 0 0.2rem; } .click-zone .click-hint { font-size: 0.8rem; color: var(--dc-ink-400); margin: 0; } .or { color: var(--dc-ink-400); margin: 0.75rem 0; } .file-selected { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; background: var(--dc-surface); border: 1px solid var(--dc-border-strong); border-radius: var(--dc-radius-md); text-align: left; } .file-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--dc-radius-sm); background: var(--dc-accent-50); color: var(--dc-accent); } .file-icon svg { width: 20px; height: 20px; } .file-info { flex: 1; min-width: 0; } .file-info .filename { font-weight: 580; color: var(--dc-ink-900); font-size: 0.9rem; margin: 0 0 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-info .filesize { color: var(--dc-ink-500); font-size: 0.8rem; margin: 0; } .hint { color: var(--dc-ink-400); font-size: 0.8rem; margin-top: 1.1rem; text-align: center; } .alert { padding: 0.75rem 1rem; border-radius: var(--dc-radius-sm); margin: 1.1rem 0 0; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 500; } .alert svg { width: 16px; height: 16px; flex-shrink: 0; } .alert-error { background: var(--dc-error-50); color: var(--dc-error); border: 1px solid var(--dc-error-100); } .alert-success { background: var(--dc-success-50); color: var(--dc-success); border: 1px solid var(--dc-success-100); } .alert-warning { background: var(--dc-warning-50); color: var(--dc-warning); border: 1px solid var(--dc-warning-100); align-items: flex-start; flex-direction: column; gap: 0.5rem; } .duplicate-confirm p { margin: 0; } .duplicate-reason-input { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; border-radius: var(--dc-radius-sm); border: 1px solid var(--dc-warning-100); background: var(--dc-surface, #fff); font-family: inherit; font-size: 0.85rem; resize: vertical; } .duplicate-reason-error { color: var(--dc-error); font-size: 0.8rem; font-weight: 600; } .duplicate-confirm-actions { display: flex; gap: 0.6rem; margin-top: 0.2rem; } /* Metadata form */ .metadata-form { margin: 2rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--dc-border); } .metadata-form-title { font-size: 0.78rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dc-ink-400); margin: 0 0 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-row:last-child { margin-bottom: 0; } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-weight: 540; margin-bottom: 0.4rem; color: var(--dc-ink-700); font-size: 0.82rem; } .form-group input, .form-group select { padding: 0.6rem 0.75rem; border: 1px solid var(--dc-border-strong); border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-family: inherit; color: var(--dc-ink-900); background: var(--dc-surface); transition: border-color 0.15s var(--dc-ease), box-shadow 0.15s var(--dc-ease); } .form-group input::placeholder { color: var(--dc-ink-300); } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--dc-accent); box-shadow: var(--dc-shadow-focus); } .form-group input[readonly] { background: var(--dc-bg); color: var(--dc-ink-500); cursor: not-allowed; } /* ================================================================= DOCUMENT METADATA CARD (Chunk Review step) ================================================================= */ .doc-metadata-card { max-width: 900px; margin: 0 auto 1.25rem; padding: 1.1rem 1.4rem; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: 12px; } .doc-metadata-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 0.85rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--dc-border); } .doc-metadata-title { font-size: 1rem; font-weight: 700; color: var(--dc-ink-900); letter-spacing: -0.01em; } .doc-metadata-type-badge { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dc-accent); border: 1px solid var(--dc-accent-600, var(--dc-accent)); border-radius: 999px; padding: 2px 10px; } .doc-metadata-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.9rem 1.5rem; } .doc-metadata-field { display: flex; flex-direction: column; gap: 2px; } .doc-metadata-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dc-ink-500); } .doc-metadata-value { font-size: 0.86rem; color: var(--dc-ink-900); } /* Review step: chunks on the left, original PDF on the right (JobPdfPanel) */ .review-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin: 0 0 0.75rem; } .review-toolbar-label { font-size: 0.75rem; color: var(--dc-ink-500); } .review-width-btn { padding: 0.25rem 0.6rem; font-size: 0.75rem; } .review-width-btn.active { border-color: var(--dc-accent); color: var(--dc-accent); } .review-split.with-pdf { display: flex; align-items: flex-start; gap: 1rem; } .review-split-main { min-width: 0; flex: 1 1 0; } .review-split-pdf { flex: 0 0 var(--pdf-width, 50%); min-width: 0; position: sticky; top: 0.75rem; height: calc(100vh - 1.5rem); } @media (max-width: 1000px) { .review-split.with-pdf { flex-direction: column; } .review-split-pdf { flex: none; width: 100%; position: static; height: 70vh; } } .doc-metadata-edit-btn { margin-left: auto; padding: 0.3rem 0.8rem; font-size: 0.78rem; } .doc-metadata-note { margin: 0.8rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--dc-border); font-size: 0.78rem; color: var(--dc-ink-500); } /* ================================================================= LOADING / PROCESSING STATES ================================================================= */ .loading-section { text-align: center; padding: 4.5rem 2rem; max-width: 600px; margin: 0 auto; } .loading-section h2 { font-size: 1.25rem; font-weight: 600; color: var(--dc-ink-900); margin: 1.75rem 0 0.4rem; letter-spacing: -0.01em; } .loading-section p { color: var(--dc-ink-500); font-size: 0.9rem; margin-bottom: 1.5rem; } .spinner, .spinner-large, .spinner-small { display: inline-block; border-radius: 50%; border: 2.5px solid var(--dc-border); border-top-color: var(--dc-accent); animation: dc-spin 0.7s linear infinite; } .spinner { width: 1rem; height: 1rem; border-width: 2px; } .spinner-large { width: 2.75rem; height: 2.75rem; border-width: 3px; } .spinner-small { width: 1.25rem; height: 1.25rem; border-width: 2px; } @keyframes dc-spin { to { transform: rotate(360deg); } } .progress-bar { width: 100%; height: 6px; background: var(--dc-border); border-radius: var(--dc-radius-pill); overflow: hidden; margin: 1rem 0; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--ls-gold-strong), var(--ls-gold-soft)); border-radius: var(--dc-radius-pill); transition: width 0.45s var(--dc-ease); } /* ================================================================= REVIEW LAYOUT (Layout Analysis + Batch Plan) ================================================================= */ .review-layout { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); box-shadow: var(--dc-shadow-sm); overflow: hidden; } .review-header { padding: 1.5rem 2rem; border-bottom: 1px solid var(--dc-border); } .review-header h2 { font-size: 1.05rem; font-weight: 620; color: var(--dc-ink-900); margin: 0 0 0.2rem; letter-spacing: -0.01em; } .review-header p { color: var(--dc-ink-500); font-size: 0.85rem; margin: 0; } .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 600px; } .panel { padding: 1.5rem; overflow-y: auto; max-height: 72vh; } .layout-panel { border-right: 1px solid var(--dc-border); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; } .panel-header h3 { font-size: 0.92rem; font-weight: 620; color: var(--dc-ink-900); display: flex; align-items: center; gap: 0.5rem; margin: 0; } .panel-header h3 svg { width: 16px; height: 16px; color: var(--dc-ink-400); } .badge { background: var(--dc-accent-50); color: var(--dc-accent-600); padding: 0.25rem 0.7rem; border-radius: var(--dc-radius-pill); font-size: 0.74rem; font-weight: 600; } .layout-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem; } .stat-item { background: var(--dc-bg); border: 1px solid var(--dc-border); padding: 0.7rem 0.8rem; border-radius: var(--dc-radius-sm); } .stat-label { display: block; font-size: 0.68rem; color: var(--dc-ink-400); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 620; } .stat-value { display: block; font-weight: 600; color: var(--dc-ink-900); margin-top: 0.2rem; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--dc-border); padding-bottom: 0; } .tab { padding: 0.55rem 0.9rem; border: none; background: none; color: var(--dc-ink-400); cursor: pointer; font-size: 0.82rem; font-weight: 540; transition: all 0.15s var(--dc-ease); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--dc-ink-700); } .tab.active { color: var(--dc-accent); border-bottom-color: var(--dc-accent); font-weight: 600; } .layout-content { min-height: 300px; } .pages-list { display: flex; flex-direction: column; gap: 0.5rem; } .page-card { padding: 0.85rem 0.9rem; border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md); cursor: pointer; transition: all 0.15s var(--dc-ease); background: var(--dc-surface); } .page-card:hover { border-color: var(--dc-accent); } .page-card.active { border-color: var(--dc-accent); background: var(--dc-accent-50); box-shadow: 0 0 0 1px var(--dc-accent); } .page-header { display: flex; justify-content: space-between; margin-bottom: 0.45rem; } .page-num { font-weight: 600; color: var(--dc-ink-900); font-size: 0.85rem; } .line-count { font-size: 0.76rem; color: var(--dc-ink-400); } .page-preview { font-size: 0.8rem; color: var(--dc-ink-500); } .preview-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .more-lines { color: var(--dc-ink-300); font-size: 0.76rem; padding: 0.25rem 0; display: block; } .type-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .type-dot.header { background: var(--ls-warning); } .type-dot.footer { background: var(--dc-ink-400); } .type-dot.title { background: var(--dc-error); } .type-dot.heading { background: var(--ls-hue-orange); } .type-dot.body { background: var(--dc-accent); } .type-dot.indented_body { background: var(--ls-hue-purple); } .type-dot.toc { background: var(--dc-success); } .lines-detail { padding: 0.25rem 0; } .lines-detail h4 { font-size: 0.88rem; font-weight: 600; color: var(--dc-ink-700); margin: 0 0 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--dc-border); } .lines-table { font-size: 0.78rem; border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm); overflow: hidden; } .lines-header { display: grid; grid-template-columns: 28px 76px 1fr 48px 38px; gap: 0.5rem; padding: 0.55rem 0.65rem; background: var(--dc-bg); font-weight: 650; color: var(--dc-ink-500); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.04em; } .line-row { display: grid; grid-template-columns: 28px 76px 1fr 48px 38px; gap: 0.5rem; padding: 0.5rem 0.65rem; border-top: 1px solid var(--dc-border); align-items: center; } .line-row:hover { background: var(--dc-bg); } .line-num { color: var(--dc-ink-300); } .line-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dc-ink-700); } .font-size { color: var(--dc-ink-400); font-size: 0.72rem; } .bold { color: var(--dc-ink-700); font-weight: 700; text-align: center; } .type-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 5px; font-size: 0.64rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .type-badge.header { background: var(--dc-warning-50); color: var(--dc-warning); } .type-badge.footer { background: var(--ls-surface-hover); color: var(--dc-ink-500); } .type-badge.title { background: var(--dc-error-50); color: var(--dc-error); } .type-badge.heading { background: var(--ls-hue-orange-bg-soft); color: var(--ls-hue-orange-text); } .type-badge.body { background: var(--dc-accent-50); color: var(--dc-accent-600); } .type-badge.indented_body { background: var(--ls-hue-purple-bg-soft); color: var(--ls-hue-purple-text); } .type-badge.toc { background: var(--dc-success-50); color: var(--dc-success); } .types-summary { display: flex; flex-direction: column; gap: 0.7rem; } .type-stat { display: flex; align-items: center; gap: 0.75rem; } .type-bar { flex: 1; height: 6px; background: var(--dc-border); border-radius: var(--dc-radius-pill); overflow: hidden; } .type-bar .fill { height: 100%; background: var(--dc-accent); border-radius: var(--dc-radius-pill); transition: width 0.45s var(--dc-ease); } .type-bar .count { min-width: 28px; text-align: right; font-size: 0.78rem; color: var(--dc-ink-500); font-weight: 600; } /* ================================================================= BATCH PLAN ================================================================= */ .batch-panel { display: flex; flex-direction: column; } .batch-plan-info { background: var(--dc-bg); border: 1px solid var(--dc-border); padding: 0.85rem 1rem; border-radius: var(--dc-radius-md); margin-bottom: 1.1rem; font-size: 0.83rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; } .batch-plan-info p { margin: 0; color: var(--dc-ink-700); } .batch-plan-info strong { color: var(--dc-ink-400); font-weight: 600; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.04em; display: block; margin-bottom: 0.15rem; } .skip-pages-control { background: var(--dc-bg); border: 1px solid var(--dc-border); padding: 0.85rem 1rem; border-radius: var(--dc-radius-md); margin-bottom: 1.1rem; } .skip-pages-control label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--dc-ink-700); margin-bottom: 0.5rem; } .skip-pages-hint { font-weight: 400; color: var(--dc-ink-400); font-size: 0.75rem; margin-left: 0.35rem; } .skip-pages-input-row { display: flex; gap: 0.6rem; align-items: center; } .skip-pages-input-row input[type="number"] { width: 90px; padding: 0.5rem 0.65rem; border-radius: var(--dc-radius-sm); border: 1px solid var(--dc-border); background: var(--ls-surface); color: var(--ls-text); font-family: inherit; font-size: 0.85rem; } .skip-pages-error { color: var(--dc-error); font-size: 0.78rem; font-weight: 600; margin: 0.5rem 0 0; } .batch-plan-regenerating { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; padding: 3rem 1rem; color: var(--dc-ink-700); font-size: 0.9rem; text-align: center; } .batch-select-controls { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } .batch-select-count { font-size: 0.8rem; color: var(--dc-ink-400); margin-right: 0.4rem; } .batches-list { display: flex; flex-direction: column; gap: 0.6rem; } .batch-card { border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md); padding: 0.9rem 1rem; cursor: pointer; transition: all 0.15s var(--dc-ease); background: var(--dc-surface); position: relative; } .batch-card:hover { border-color: var(--dc-accent); } .batch-card.active { border-color: var(--dc-accent); background: var(--dc-accent-50); } .batch-card.approved { box-shadow: inset 3px 0 0 var(--dc-success); } .batch-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; } .batch-id { font-weight: 620; color: var(--dc-ink-900); font-size: 0.88rem; } .page-range { font-size: 0.78rem; color: var(--dc-accent-600); font-weight: 600; background: var(--dc-accent-50); padding: 0.1rem 0.5rem; border-radius: var(--dc-radius-pill); } .batch-meta { display: flex; gap: 0.9rem; font-size: 0.76rem; color: var(--dc-ink-500); margin-bottom: 0.5rem; } .page-count, .reason { display: inline-flex; align-items: center; gap: 0.3rem; } .page-count::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--dc-ink-300); } .reason { color: var(--dc-ink-400); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .batch-preview { margin-top: 0.5rem; padding: 0.55rem 0.65rem; background: var(--dc-bg); border-radius: var(--dc-radius-sm); font-size: 0.78rem; } .batch-preview .preview-line { padding: 0.18rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .batch-actions { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--dc-border); } .approve-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.82rem; font-weight: 540; color: var(--dc-ink-700); } .approve-check input { width: 1rem; height: 1rem; accent-color: var(--dc-success); cursor: pointer; } .batch-detail { margin-top: 1.5rem; padding: 1rem 1.1rem; background: var(--dc-bg); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md); } .batch-detail h4 { margin: 0 0 0.6rem; font-size: 0.88rem; font-weight: 620; color: var(--dc-ink-900); } .batch-detail > p { font-size: 0.8rem; color: var(--dc-ink-500); margin: 0 0 0.5rem; } .batch-lines { margin-top: 0.6rem; max-height: 280px; overflow-y: auto; border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm); background: var(--dc-surface); } .detail-line { display: flex; gap: 0.65rem; padding: 0.5rem 0.65rem; font-size: 0.8rem; border-bottom: 1px solid var(--dc-border); align-items: center; } .detail-line:last-child { border-bottom: none; } .detail-line .line-page { color: var(--dc-ink-300); font-size: 0.7rem; min-width: 36px; } .detail-line .line-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .review-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; padding: 1.25rem 2rem; border-top: 1px solid var(--dc-border); background: var(--dc-bg); } .status-text { color: var(--dc-ink-500); font-size: 0.88rem; margin-top: 1rem; } /* ================================================================= CHUNKING IN PROGRESS ================================================================= */ .chunking-section { max-width: 640px; margin: 0 auto; } .chunking-friendly-note { text-align: center; color: var(--dc-ink-400); font-size: 0.85rem; line-height: 1.5; max-width: 480px; margin: 0.4rem auto 1.1rem; } .connection-status { margin: 0.5rem 0 1rem; text-align: center; } .sse-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: var(--dc-radius-pill); font-size: 0.78rem; font-weight: 560; border: 1px solid transparent; } .sse-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .sse-badge.connected { background: var(--dc-success-50); color: var(--dc-success); border-color: var(--dc-success-100); } .sse-badge.connected .dot { background: var(--dc-success); box-shadow: 0 0 0 3px var(--dc-success-100); } .sse-badge.reconnecting { background: var(--dc-warning-50); color: var(--dc-warning); border-color: var(--dc-warning-100); } .sse-badge.reconnecting .dot { background: var(--dc-warning); animation: dc-pulse-opacity 1.4s infinite; } .sse-badge.fallback { background: var(--dc-bg); color: var(--dc-ink-500); border-color: var(--dc-border); } .sse-badge.fallback .dot { background: var(--dc-ink-400); } @keyframes dc-pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .overall-progress { margin: 1.25rem 0; padding: 1.1rem 1.25rem; background: var(--dc-surface); border-radius: var(--dc-radius-md); border: 1px solid var(--dc-border); box-shadow: var(--dc-shadow-xs); } .progress-summary { font-size: 0.92rem; margin: 0 0 0.7rem; color: var(--dc-ink-500); } .progress-summary strong { color: var(--dc-ink-900); font-size: 1.05rem; font-weight: 650; } .progress-percent { text-align: right; font-weight: 650; color: var(--dc-ink-700); margin: 0.4rem 0 0; font-size: 0.85rem; } .current-batch-info { margin: 1.25rem 0; padding: 0.9rem 1.15rem; background: var(--dc-accent-50); border-radius: var(--dc-radius-md); border: 1px solid var(--dc-accent-100); } .status-text.processing { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--dc-accent-600); margin: 0 0 0.3rem; font-weight: 540; } .status-text.processing svg { width: 16px; height: 16px; animation: dc-spin 1.4s linear infinite; flex-shrink: 0; } .batch-position { color: var(--dc-ink-500); font-size: 0.82rem; margin: 0; } .completed-batches { margin: 1.25rem 0; padding: 1rem 1.1rem; background: var(--dc-success-50); border-radius: var(--dc-radius-md); border: 1px solid var(--dc-success-100); } .batch-progress-title { display: flex; align-items: center; gap: 0.4rem; color: var(--dc-success); margin: 0 0 0.7rem; font-size: 0.85rem; font-weight: 540; } .batch-progress-title svg { width: 15px; height: 15px; flex-shrink: 0; } .batch-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; } .batch-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.75rem; border-radius: var(--dc-radius-pill); font-size: 0.78rem; font-weight: 540; } .batch-pill svg { width: 12px; height: 12px; } .batch-pill.done { background: var(--dc-success); color: white; } .batch-pill.active { background: var(--dc-accent); color: var(--ls-ink-on-gold); animation: dc-pulse-scale 1.6s infinite; } @keyframes dc-pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } .pending-batches { margin: 1rem 0; padding: 0.7rem 1rem; background: var(--dc-warning-50); border-radius: var(--dc-radius-sm); border: 1px solid var(--dc-warning-100); } .pending-batches.all-done { background: var(--dc-success-50); border-color: var(--dc-success-100); } .pending-text { color: var(--dc-warning); font-size: 0.85rem; margin: 0; } .pending-batches.all-done .pending-text { color: var(--dc-success); font-weight: 560; } .poll-info { margin-top: 1.25rem; color: var(--dc-ink-300); font-size: 0.78rem; } .chunking-section .progress-bar { height: 8px; } /* ================================================================= CHUNKS SUCCESS / VIEWER (ChunksViewer.razor) ================================================================= */ .chunks-success-section { padding: 0; max-width: 1200px; margin: 0 auto; } .success-header { text-align: center; margin-bottom: 1.75rem; } .success-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--dc-success-50); color: var(--dc-success); } .success-icon svg { width: 28px; height: 28px; } .success-header h2, .editor-header h2 { font-size: 1.25rem; font-weight: 640; color: var(--dc-ink-900); margin: 0 0 0.25rem; letter-spacing: -0.01em; } .success-header p, .editor-header p { color: var(--dc-ink-500); font-size: 0.88rem; margin: 0; } .action-bar { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.75rem; } .chunks-container { display: flex; flex-direction: column; gap: 1rem; } .chunk-card { background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-md); padding: 1.25rem 1.4rem; transition: box-shadow 0.15s var(--dc-ease), border-color 0.15s var(--dc-ease); } .chunk-card:hover { box-shadow: var(--dc-shadow-sm); border-color: var(--dc-border-strong); } .chunk-header { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--dc-border); } .chunk-order { background: var(--ls-surface-hover); color: var(--ls-gold); border: 1px solid var(--ls-gold-100); padding: 0.2rem 0.6rem; border-radius: var(--dc-radius-pill); font-weight: 650; font-size: 0.76rem; flex-shrink: 0; } .chunk-confidence { margin-left: auto; font-size: 0.78rem; color: var(--dc-ink-500); font-weight: 560; background: var(--dc-bg); padding: 0.2rem 0.55rem; border-radius: var(--dc-radius-pill); } .chunk-heading { font-size: 1.05rem; font-weight: 600; color: var(--dc-ink-900); margin: 0.6rem 0; letter-spacing: -0.005em; } .chunk-hierarchy { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; } .hierarchy-item { background: var(--dc-bg); border: 1px solid var(--dc-border); padding: 0.22rem 0.6rem; border-radius: var(--dc-radius-sm); font-size: 0.74rem; color: var(--dc-ink-500); font-weight: 500; } .chunk-text { margin: 0; color: var(--dc-ink-700); line-height: 1.65; font-size: 0.875rem; } .chunk-text pre { background: var(--dc-bg); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm); padding: 0.9rem 1rem; white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: 0.85rem; line-height: 1.65; color: var(--dc-ink-700); max-height: 280px; overflow-y: auto; margin: 0; } .chunk-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--dc-border); font-size: 0.76rem; color: var(--dc-ink-400); } .chunk-footer span { display: inline-flex; align-items: center; gap: 0.3rem; } .chunk-footer svg { width: 13px; height: 13px; } .continuity-badge { background: var(--dc-warning-50); color: var(--dc-warning); padding: 0.2rem 0.55rem; border-radius: var(--dc-radius-pill); font-size: 0.72rem; font-weight: 560; } .chunk-warnings { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; } .warning-tag { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--dc-warning-50); color: var(--dc-warning); padding: 0.25rem 0.6rem; border-radius: var(--dc-radius-sm); font-size: 0.74rem; font-weight: 540; } .warning-tag svg { width: 12px; height: 12px; } /* Chunk Review image attach (see ChunksViewer.razor) */ .chunk-images { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; margin-top: 0.75rem; } .chunk-image-thumb { position: relative; width: 64px; height: 64px; border-radius: var(--dc-radius-sm); overflow: hidden; border: 1px solid var(--dc-border-strong); background: var(--dc-surface-raised); flex-shrink: 0; } .chunk-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .chunk-image-remove { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .chunk-image-remove:hover { background: var(--dc-error); } .chunk-image-saved-note { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--ls-check-green); } .chunk-image-saved-note svg { width: 12px; height: 12px; flex-shrink: 0; } .chunk-image-status { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.1rem 0.2rem; font-size: 0.6rem; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.6); } .chunk-image-status.failed { background: var(--dc-error); } .chunk-image-add { width: 64px; height: 64px; border-radius: var(--dc-radius-sm); border: 1px dashed var(--dc-border-strong); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.62rem; color: var(--dc-text-muted, var(--ls-text-muted)); cursor: pointer; flex-shrink: 0; position: relative; overflow: hidden; padding: 0.2rem; box-sizing: border-box; } .chunk-image-add:hover { border-color: var(--ls-gold); color: var(--ls-text); } .chunk-image-add input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .chunk-image-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--ls-gold); border-radius: 50%; animation: dc-spin 0.7s linear infinite; } /* Chunk type badge — shared palette across all components */ .chunk-type-badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: var(--dc-radius-sm); font-size: 0.66rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .chunk-type-badge.document_title { background: var(--ls-hue-orange-bg); color: var(--ls-hue-orange-text-strong); } .chunk-type-badge.preamble { background: var(--dc-accent-50); color: var(--dc-accent-600); } .chunk-type-badge.part { background: var(--ls-hue-amber-bg); color: var(--ls-hue-gold2-text); } .chunk-type-badge.chapter { background: var(--ls-hue-purple-bg); color: var(--ls-hue-purple-text-strong); } .chunk-type-badge.section { background: var(--dc-success-50); color: var(--dc-success); } .chunk-type-badge.article { background: var(--ls-hue-pink-bg); color: var(--ls-hue-pink-text); } .chunk-type-badge.paragraph { background: var(--ls-hue-teal-bg); color: var(--ls-hue-teal-text); } .chunk-type-badge.clause { background: var(--ls-hue-amber-bg); color: var(--ls-warning); } .chunk-type-badge.subclause { background: var(--ls-hue-pink-bg); color: var(--ls-hue-pink); } .chunk-type-badge.schedule { background: var(--ls-hue-tan-bg); color: var(--ls-hue-tan-text); } .chunk-type-badge.annex { background: var(--ls-surface-hover); color: var(--ls-secondary); } .chunk-type-badge.appendix { background: var(--ls-hue-sage-bg); color: var(--ls-hue-sage-text); } .chunk-type-badge.body { background: var(--ls-surface-hover); color: var(--dc-ink-500); } .chunk-type-badge.heading { background: var(--dc-warning-50); color: var(--dc-warning); } /* ================================================================= CHUNK EDITOR ================================================================= */ .chunk-editor-section { padding: 0; max-width: 1200px; margin: 0 auto; } .editor-header { text-align: center; margin-bottom: 1.75rem; } .editor-header .success-icon { background: var(--dc-accent-50); color: var(--dc-accent); } .editor-actions { display: flex; gap: 0.65rem; justify-content: center; margin-bottom: 1.75rem; flex-wrap: wrap; } .pending-review-note { display: inline-flex; align-items: center; padding: 0.65rem 1.15rem; border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--ls-text-dim); background: var(--ls-surface-raised); border: 1px dashed var(--ls-border-strong); max-width: 420px; text-align: center; line-height: 1.4; } .health-summary-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 0.65rem 1.15rem; margin: 0 0 1.25rem; border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--ls-text-dim); background: var(--ls-surface-raised); border: 1px solid var(--ls-border-strong); text-align: center; } .health-summary-banner.needs-review { border-color: var(--ls-review-accent); background: var(--ls-review-accent-bg); } .health-summary-banner .warn-item { color: var(--ls-review-accent-text); font-weight: 600; } /* ── Shared modal pattern (global) ────────────────────────────────────────── Core structure already duplicated per-page in several admin pages' scoped .razor.css files (UserManagement, RoleManagement, etc.) — added globally here too since ChunkEditor.razor has no scoped CSS of its own, and reusing a proper themed modal is exactly what fixed the low-contrast Bootstrap .alert.alert-warning previously used for the discard confirmation. */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-card { background: var(--ls-surface); border: 1px solid var(--ls-border-strong); border-radius: 14px; width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--ls-shadow-modal); } .modal-card.modal-sm { max-width: 380px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 14px; border-bottom: 1px solid var(--ls-border); flex-shrink: 0; } .modal-header h3 { font-size: 16px; font-weight: 700; color: var(--ls-text); margin: 0; } .modal-close { background: none; border: none; color: var(--ls-text-dim); cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; line-height: 1; } .modal-close:hover { color: var(--ls-text); background: var(--ls-surface-hover); } .modal-body { padding: 20px 22px; overflow-y: auto; flex: 1; } .modal-body p { color: var(--ls-text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 8px; } .modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--ls-border); flex-shrink: 0; } .chunks-editor-list { display: flex; flex-direction: column; gap: 0.85rem; } .chunk-edit-card { background: var(--dc-surface); border-radius: var(--dc-radius-md); border: 1px solid var(--dc-border); overflow: hidden; transition: border-color 0.15s var(--dc-ease), box-shadow 0.15s var(--dc-ease); } .chunk-edit-card:hover { border-color: var(--dc-border-strong); } .chunk-edit-card.editing { border-color: var(--dc-accent); box-shadow: var(--dc-shadow-focus); } .chunk-edit-card.deleted { opacity: 0.6; background: var(--dc-error-50); border-color: var(--dc-error-100); } .chunk-edit-header { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1.2rem; background: var(--dc-bg); cursor: pointer; user-select: none; } .chunk-edit-card.editing .chunk-edit-header { background: var(--dc-accent-50); } .chunk-edit-header .chunk-order { background: none; color: var(--dc-ink-400); font-weight: 650; font-size: 0.8rem; min-width: 32px; padding: 0; } .chunk-type-select { padding: 0.3rem 0.55rem; border-radius: var(--dc-radius-sm); border: 1px solid var(--dc-border-strong); font-size: 0.78rem; background: var(--dc-surface); color: var(--dc-ink-700); font-family: inherit; } .chunk-type-select:focus { outline: none; border-color: var(--dc-accent); box-shadow: var(--dc-shadow-focus); } .chunk-pages { color: var(--dc-ink-500); font-size: 0.78rem; } .chunk-edit-header .chunk-confidence { margin-left: auto; } .chunk-actions { display: flex; gap: 0.35rem; margin-left: 0.5rem; } .btn-delete, .btn-edit-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm); cursor: pointer; color: var(--dc-ink-400); transition: all 0.15s var(--dc-ease); font-size: 0.85rem; } .btn-delete svg, .btn-edit-toggle svg { width: 14px; height: 14px; } .btn-delete:hover { color: var(--dc-error); border-color: var(--dc-error-100); background: var(--dc-error-50); } .btn-edit-toggle:hover { color: var(--dc-accent); border-color: var(--dc-accent-100); background: var(--dc-accent-50); } .deleted-banner { padding: 0.7rem 1.2rem; background: var(--dc-error-50); color: var(--dc-error); display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; font-weight: 500; gap: 1rem; } .btn-undo { background: var(--dc-surface); border: 1px solid var(--dc-error); color: var(--dc-error); padding: 0.3rem 0.8rem; border-radius: var(--dc-radius-sm); cursor: pointer; font-size: 0.78rem; font-weight: 560; flex-shrink: 0; transition: all 0.15s var(--dc-ease); } .btn-undo:hover { background: var(--dc-error); color: white; } .chunk-edit-body { padding: 1.25rem 1.2rem; border-top: 1px solid var(--dc-border); } .edit-row { margin-bottom: 1rem; } .edit-row:last-child { margin-bottom: 0; } .edit-row label { display: block; font-weight: 540; margin-bottom: 0.4rem; color: var(--dc-ink-700); font-size: 0.8rem; } .edit-row input[type="text"], .edit-row textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--dc-border-strong); border-radius: var(--dc-radius-sm); font-size: 0.875rem; font-family: inherit; color: var(--dc-ink-900); background: var(--dc-surface); transition: border-color 0.15s var(--dc-ease), box-shadow 0.15s var(--dc-ease); } .edit-row input[type="text"]:focus, .edit-row textarea:focus { outline: none; border-color: var(--dc-accent); box-shadow: var(--dc-shadow-focus); } .chunk-textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .hierarchy-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; } .hierarchy-field input { width: 100%; } .edit-row.meta-row { display: flex; gap: 1.75rem; margin-bottom: 1rem; } .edit-row.meta-row label { display: flex; align-items: center; gap: 0.45rem; font-weight: 480; cursor: pointer; margin-bottom: 0; color: var(--dc-ink-700); font-size: 0.82rem; } .edit-row.meta-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--dc-accent); cursor: pointer; } .warnings-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chunk-preview-body { padding: 0.9rem 1.2rem 1.1rem; } .chunk-preview-body .chunk-heading { margin: 0 0 0.5rem; font-size: 0.98rem; } .chunk-preview-body .chunk-hierarchy { margin-bottom: 0.6rem; } .chunk-preview-body .chunk-text { color: var(--dc-ink-500); font-size: 0.85rem; line-height: 1.6; } /* ================================================================= SUCCESS / ERROR TERMINAL STATES ================================================================= */ .success-section { text-align: center; padding: 4.5rem 2rem; max-width: 560px; margin: 0 auto; } .success-section .success-icon { width: 64px; height: 64px; margin-bottom: 1.25rem; } .success-section .success-icon svg { width: 32px; height: 32px; } .success-section h2 { color: var(--dc-ink-900); font-size: 1.3rem; font-weight: 640; margin-bottom: 0.4rem; letter-spacing: -0.01em; } .success-section p { color: var(--dc-ink-500); font-size: 0.9rem; } .success-section .success-text { color: var(--dc-success); font-size: 0.95rem; font-weight: 560; margin: 0.75rem 0; } .success-section .btn-primary { margin-top: 1.5rem; } .success-section .success-actions { display: flex; gap: 0.65rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .success-section .success-actions .btn-primary, .success-section .success-actions .btn-secondary { margin-top: 0; } .error-section { text-align: center; padding: 4.5rem 2rem; max-width: 560px; margin: 0 auto; } .error-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--dc-error-50); color: var(--dc-error); } .error-icon svg { width: 32px; height: 32px; } .error-section h2 { color: var(--dc-ink-900); font-size: 1.3rem; font-weight: 640; margin-bottom: 0.4rem; letter-spacing: -0.01em; } .error-section p { color: var(--dc-ink-500); margin-bottom: 1.75rem; font-size: 0.9rem; } /* ================================================================= RESPONSIVE ================================================================= */ @media (max-width: 1024px) { .review-grid { grid-template-columns: 1fr; } .layout-panel { border-right: none; border-bottom: 1px solid var(--dc-border); } .panel { max-height: none; } } @media (max-width: 768px) { .app-container { padding: 1.25rem 1rem 3rem; } .app-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .app-header h1 { font-size: 1.25rem; } .upload-card { padding: 1.75rem; } .form-row, .hierarchy-row { grid-template-columns: 1fr; } .review-actions { flex-direction: column; align-items: stretch; } .editor-actions { flex-direction: column; } .action-bar { flex-direction: column; } .lines-header, .line-row { grid-template-columns: 24px 60px 1fr 40px; } .lines-header span:nth-child(5), .line-row .bold { display: none; } .dc-steps { display: none; } } /* =================================================================== GLOBAL DARK MODE — MudBlazor, Bootstrap & native form control overrides. These tokens make every MudBlazor component (buttons, inputs, dialogs, snackbars, selects, switches, expansion panels, tooltips, progress indicators) follow the same black & gold system defined above, without touching any component markup or logic. =================================================================== */ /* --- MudBlazor palette variables -------------------------------------- */ :root, .mud-theme-provider { --mud-palette-black: #000000; --mud-palette-white: var(--ls-text); --mud-palette-primary: var(--ls-gold); --mud-palette-primary-darken: var(--ls-gold-strong); --mud-palette-primary-lighten: var(--ls-gold-soft); --mud-palette-primary-text: var(--ls-ink-on-gold); --mud-palette-secondary: var(--ls-secondary); --mud-palette-secondary-darken: var(--ls-secondary-darken); --mud-palette-secondary-lighten: var(--ls-secondary-lighten); --mud-palette-secondary-text: var(--ls-ink-on-secondary); --mud-palette-tertiary: var(--ls-gold-soft); --mud-palette-tertiary-text: var(--ls-ink-on-gold); --mud-palette-info: var(--ls-info); --mud-palette-info-text: var(--ls-ink-on-info); --mud-palette-success: var(--ls-success); --mud-palette-success-text: var(--ls-ink-on-success-strong); --mud-palette-warning: var(--ls-warning); --mud-palette-warning-text: var(--ls-ink-on-warning); --mud-palette-error: var(--ls-error); --mud-palette-error-text: var(--ls-ink-on-error-strong); --mud-palette-dark: var(--ls-surface); --mud-palette-dark-text: var(--ls-text); --mud-palette-text-primary: var(--ls-text); --mud-palette-text-secondary: var(--ls-text-muted); --mud-palette-text-disabled: var(--ls-text-dim); --mud-palette-background: var(--ls-bg); --mud-palette-background-grey: var(--ls-bg-raised); --mud-palette-surface: var(--ls-surface); --mud-palette-drawer-background: var(--ls-bg-raised); --mud-palette-drawer-text: var(--ls-text); --mud-palette-drawer-icon: var(--ls-text-muted); --mud-palette-appbar-background: var(--ls-bg-raised); --mud-palette-appbar-text: var(--ls-text); --mud-palette-lines-default: var(--ls-border); --mud-palette-lines-inputs: var(--ls-border-strong); --mud-palette-table-lines: var(--ls-border); --mud-palette-table-striped: var(--ls-surface-raised); --mud-palette-table-hover: var(--ls-surface-hover); --mud-palette-divider: var(--ls-border); --mud-palette-divider-light: var(--ls-border); --mud-palette-action-default: var(--ls-text-muted); --mud-palette-action-disabled: var(--ls-text-dim); --mud-palette-action-disabled-background: var(--ls-surface-raised); --mud-palette-overlay-dark: rgba(0, 0, 0, 0.7); --mud-palette-overlay-light: rgba(0, 0, 0, 0.5); --mud-palette-hover-opacity: 0.08; --mud-default-borderradius: 10px; --mud-typography-default-family: "Inter", sans-serif; } /* --- Surfaces: papers, dialogs, menus, popovers ------------------------ */ .mud-paper { background-color: var(--ls-surface); color: var(--ls-text) !important; border-color: var(--ls-border) !important; } .mud-paper-outlined { border: 1px solid var(--ls-border) !important; } .mud-dialog-content, .mud-dialog-title, .mud-dialog-actions { background-color: var(--ls-surface); color: var(--ls-text) !important; } .mud-popover, .mud-menu .mud-list, .mud-picker-container { background-color: var(--ls-surface-raised) !important; color: var(--ls-text) !important; border: 1px solid var(--ls-border) !important; } .mud-overlay { background-color: rgba(0, 0, 0, 0.65) !important; } /* --- Buttons ------------------------------------------------------------ */ .mud-button-filled.mud-button-filled-primary { color: var(--ls-ink-on-gold) !important; } .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--ls-gold-soft) !important; } .mud-button-outlined.mud-button-outlined-primary { border-color: var(--ls-gold-muted) !important; color: var(--ls-gold) !important; } .mud-button-outlined.mud-button-outlined-primary:hover { background-color: var(--ls-gold-50) !important; border-color: var(--ls-gold) !important; } .mud-button-text.mud-button-text-primary { color: var(--ls-gold) !important; } .mud-icon-button { color: var(--ls-text-muted) !important; } /* --- Inputs / text fields / selects -------------------------------------- */ .mud-input-control .mud-input, .mud-input-control .mud-input-slot { color: var(--ls-text) !important; } .mud-input-outlined .mud-input-outlined-border { border-color: var(--ls-border-strong) !important; } .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--ls-gold-muted) !important; } .mud-input-outlined.mud-input-focused .mud-input-outlined-border, .mud-input-control.mud-focused .mud-input-outlined-border { border-color: var(--ls-gold) !important; border-width: 1.5px !important; } .mud-input-underline:before { border-color: var(--ls-border-strong) !important; } .mud-input-underline:hover:before { border-color: var(--ls-gold-muted) !important; } .mud-input-control.mud-focused .mud-input-underline:after, .mud-input-underline-focused { border-color: var(--ls-gold) !important; } .mud-input-label { color: var(--ls-text-muted) !important; } .mud-input-control.mud-focused .mud-input-label, .mud-input-label.mud-input-label-text.mud-focused { color: var(--ls-gold) !important; } .mud-select-input .mud-input-slot, .mud-list-item { color: var(--ls-text) !important; } .mud-list-item:hover, .mud-list-item-clickable:hover { background-color: var(--ls-surface-hover); } .mud-list-item-selected { background-color: var(--ls-gold-50) !important; color: var(--ls-gold) !important; } .mud-autocomplete .mud-input-adornment svg { color: var(--ls-text-muted) !important; } /* --- Switch / checkbox / radio accents ----------------------------------- */ .mud-switch-track { background-color: var(--ls-border-strong) !important; } .mud-checked .mud-switch-track { background-color: var(--ls-gold-100) !important; } .mud-switch-thumb { background-color: var(--ls-text-muted) !important; } .mud-checked .mud-switch-thumb { background-color: var(--ls-gold) !important; } .mud-checkbox-true, .mud-radio-true { color: var(--ls-gold) !important; } /* --- Alerts -------------------------------------------------------------- */ .mud-alert { border-radius: var(--dc-radius-sm, 8px) !important; } .mud-alert-filled-success { background-color: var(--ls-success); color: var(--ls-ink-on-success-strong); } .mud-alert-filled-warning { background-color: var(--ls-warning); color: var(--ls-ink-on-warning); } .mud-alert-filled-error { background-color: var(--ls-error); color: var(--ls-ink-on-error-strong); } .mud-alert-filled-info { background-color: var(--ls-info); color: var(--ls-ink-on-info); } .mud-alert-text-success { background-color: var(--ls-success-50); color: var(--ls-success); } .mud-alert-text-warning { background-color: var(--ls-warning-50); color: var(--ls-warning); } .mud-alert-text-error { background-color: var(--ls-error-50); color: var(--ls-error); } .mud-alert-text-info { background-color: var(--ls-info-50); color: var(--ls-info); } /* --- Snackbar ------------------------------------------------------------- */ .mud-snackbar { background-color: var(--ls-surface-raised) !important; color: var(--ls-text); border: 1px solid var(--ls-border) !important; } /* --- Progress indicators -------------------------------------------------- */ .mud-progress-linear-bar { background-color: var(--ls-gold) !important; } .mud-progress-linear-rail { background-color: var(--ls-border) !important; } .mud-progress-circular .mud-progress-circular-circle { stroke: var(--ls-gold) !important; } /* --- Expansion panels ------------------------------------------------------ */ .mud-expand-panel { background-color: var(--ls-surface); border-color: var(--ls-border) !important; } .mud-expand-panel-header { color: var(--ls-text !important); } .mud-expand-panel-text { color: var(--ls-text-muted) !important; } /* --- Tooltip --------------------------------------------------------------- */ .mud-tooltip { background-color: var(--ls-surface-raised) !important; color: var(--ls-text); border: 1px solid var(--ls-border) !important; } /* --- Tables (MudTable, if used) --------------------------------------------- */ .mud-table { background-color: var(--ls-surface) !important; color: var(--ls-text) !important; } .mud-table-head .mud-table-cell { color: var(--ls-text-muted) !important; border-bottom: 1px solid var(--ls-border-strong) !important; } .mud-table-row:hover { background-color: var(--ls-surface-hover) !important; } .mud-table-row .mud-table-cell { border-bottom: 1px solid var(--ls-border) !important; } .mud-dialog, .mud-dialog-width-sm, .mud-dialog-width-full { width: 280px !important } .mud-dialog .mud-dialog-title { display: none !important; } .mud-popover.mud-popover-open { scrollbar-width: none !important; } /*.mud-icon-root.mud-svg-icon { fill: var(--ls-text-muted) !important; }*/ /* ================================================================= BOOTSTRAP DARK OVERRIDES The shell uses a handful of Bootstrap utility/layout classes alongside the custom design system; keep them legible on dark. ================================================================= */ .form-control, .form-select { background-color: var(--ls-surface); color: var(--ls-text); border-color: var(--ls-border-strong); } .form-control:focus, .form-select:focus { background-color: var(--ls-surface); color: var(--ls-text); border-color: var(--ls-gold); } .form-control::placeholder { color: var(--ls-text-dim); } .form-check-input { background-color: var(--ls-surface); border-color: var(--ls-border-strong); } .form-check-input:checked { background-color: var(--ls-gold); border-color: var(--ls-gold); } .dropdown-menu { background-color: var(--ls-surface-raised); border-color: var(--ls-border); } .dropdown-item { color: var(--ls-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--ls-surface-hover); color: var(--ls-text); } /* ================================================================= SCROLLBAR — subtle gold-tinted scrollbar to match the theme ================================================================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ls-bg-raised); } ::-webkit-scrollbar-thumb { background: var(--ls-border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--ls-gold-muted); } /* ── Buttons ── */ .admin-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: background 0.15s ease, opacity 0.15s ease; white-space: nowrap; } .admin-btn:disabled { opacity: 0.55; cursor: not-allowed; } .admin-btn.primary { background: var(--ls-gold); color: var(--ls-ink-on-gold); } .admin-btn.primary:hover:not(:disabled) { background: var(--ls-gold-soft); } .admin-btn.ghost { background: var(--ls-surface-raised); color: var(--ls-text-muted); border: 1px solid var(--ls-border-strong); } .admin-btn.ghost:hover:not(:disabled) { background: var(--ls-surface-hover); } .admin-btn.danger { background: var(--ls-error); color: #fff; } .admin-btn.danger:hover:not(:disabled) { opacity: 0.85; }