/* ============================================ CSS Custom Properties (Theme System) ============================================ This theming system supports: - Two themes: "clean" (Clean Professional) and "terminal" (Modern Legal Tech) - Light/dark mode toggle within each theme - Semantic naming for colors, typography, and spacing Usage: - Default: Option A (Clean Professional) in light mode - Switch theme: - Switch mode: - Combine: ============================================ */ /* Import fonts for theming - Using distinctive typography per frontend-design skill */ /* DM Sans: More distinctive than Inter, with subtle character and excellent readability */ /* Playfair Display: Elegant serif for headings, creating visual hierarchy */ /* JetBrains Mono: Modern monospace for code/data */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* Import Noto Sans Arabic for proper Arabic text rendering */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap'); /* ---------------------------------------- Theme: Clean Professional (Option A) Default theme - Light mode default DESIGN PHILOSOPHY (per frontend-design skill): - Sophisticated, modern legal tech aesthetic - Deep teal primary accent (modern, trustworthy) - Warm amber secondary (approachable, attention-grabbing) - Clean slate neutrals with generous whitespace - Distinctive yet professional color harmony ---------------------------------------- */ :root, html[data-theme="clean"] { /* === Colors: Backgrounds === */ --color-bg: #FAFBFC; --color-surface: #FFFFFF; --color-surface-elevated: #FFFFFF; --color-surface-hover: #F1F5F9; /* === Colors: Primary (shorthand aliases) === */ --color-primary: #0D9488; --color-primary-hover: #0F766E; --color-primary-light: rgba(13, 148, 136, 0.08); --color-primary-ring: rgba(13, 148, 136, 0.25); /* === Colors: Semantic Light Backgrounds === */ --color-success-light: rgba(5, 150, 105, 0.08); --color-warning-light: rgba(217, 119, 6, 0.08); --color-error-light: rgba(220, 38, 38, 0.08); --color-info-light: rgba(8, 145, 178, 0.08); /* === Colors: Text === */ --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-muted: #94A3B8; --color-text-inverse: #FFFFFF; /* === Colors: Accent === */ /* Deep Teal: Modern, trustworthy, professional */ --color-accent-primary: var(--color-primary); --color-accent-secondary: #D97706; --color-accent-primary-hover: #0F766E; --color-accent-secondary-hover: #B45309; /* === Colors: Semantic === */ --color-success: #059669; --color-success-bg: #D1FAE5; --color-success-text: #065F46; --color-warning: #D97706; --color-warning-bg: #FEF3C7; --color-warning-text: #92400E; --color-error: #DC2626; --color-error-bg: #FEE2E2; --color-error-text: #991B1B; --color-info: #0891B2; --color-info-bg: #CFFAFE; --color-info-text: #155E75; /* === Colors: Borders === */ --color-border: #E2E8F0; --color-border-strong: #CBD5E0; --color-border-muted: #F1F5F9; /* === Colors: Interactive States === */ --color-focus-ring: rgba(30, 58, 95, 0.3); --color-hover-overlay: rgba(0, 0, 0, 0.04); --color-active-overlay: rgba(0, 0, 0, 0.08); /* === Colors: Shadows === */ --shadow-color: rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 2px var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* === Typography === */ /* DM Sans: Distinctive geometric sans-serif with excellent readability */ /* Avoids generic AI aesthetics like Inter, Roboto, Arial per frontend-design skill */ --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', Consolas, 'Courier New', monospace; /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* Letter Spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; /* === Spacing === */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* === Border Radius === */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* === Transitions === */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; /* === Z-Index Scale === */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* === Risk Severity Colors === */ --color-risk-critical: #742A2A; --color-risk-critical-bg: #FED7D7; --color-risk-high: #C53030; --color-risk-high-bg: #FED7D7; --color-risk-medium: #D69E2E; --color-risk-medium-bg: #FAF089; --color-risk-low: #3182CE; --color-risk-low-bg: #BEE3F8; /* === Danger Colors (alias for error) === */ --color-danger: #DC2626; --color-danger-light: rgba(220, 38, 38, 0.08); --color-danger-text: #991B1B; --color-danger-hover: #B91C1C; /* === Spacing Numeric Aliases (1-8 scale) === */ --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 32px; --spacing-8: 40px; /* === Text Size Aliases === */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; /* === Accent Light === */ --color-accent-primary-light: rgba(13, 148, 136, 0.08); /* === Font Size: Medium === */ --font-size-md: 1rem; /* === Background aliases === */ --color-bg-primary: var(--color-surface); --color-bg-secondary: var(--color-bg); } /* ---------------------------------------- Theme: Clean Professional - Dark Mode ---------------------------------------- */ html[data-theme="clean"][data-mode="dark"], html:not([data-theme])[data-mode="dark"] { /* === Colors: Backgrounds === */ --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-elevated: #334155; /* === Colors: Text === */ --color-text-primary: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-muted: #64748B; --color-text-inverse: #0F172A; /* === Colors: Accent === */ --color-accent-primary: #3B82F6; --color-accent-secondary: #D4AF37; --color-accent-primary-hover: #60A5FA; --color-accent-secondary-hover: #EAB308; /* === Colors: Semantic === */ --color-success: #22C55E; --color-success-bg: #14532D; --color-success-text: #86EFAC; --color-warning: #F59E0B; --color-warning-bg: #713F12; --color-warning-text: #FDE68A; --color-error: #EF4444; --color-error-bg: #7F1D1D; --color-error-text: #FCA5A5; --color-info: #60A5FA; --color-info-bg: #1E3A5F; --color-info-text: #BFDBFE; /* === Colors: Borders === */ --color-border: #334155; --color-border-strong: #475569; --color-border-muted: #1E293B; /* === Colors: Interactive States === */ --color-focus-ring: rgba(59, 130, 246, 0.4); --color-hover-overlay: rgba(255, 255, 255, 0.05); --color-active-overlay: rgba(255, 255, 255, 0.1); /* === Colors: Shadows === */ --shadow-color: rgba(0, 0, 0, 0.4); /* === Colors: Primary (shorthand aliases - Dark Mode) === */ --color-primary: #3B82F6; --color-primary-hover: #60A5FA; --color-primary-light: rgba(59, 130, 246, 0.15); --color-primary-ring: rgba(59, 130, 246, 0.3); --color-surface-hover: #334155; /* === Colors: Semantic Light Backgrounds (Dark Mode) === */ --color-success-light: rgba(34, 197, 94, 0.15); --color-warning-light: rgba(245, 158, 11, 0.15); --color-error-light: rgba(239, 68, 68, 0.15); --color-info-light: rgba(96, 165, 250, 0.15); /* === Risk Severity Colors (Dark Mode) === */ --color-risk-critical: #FCA5A5; --color-risk-critical-bg: #7F1D1D; --color-risk-high: #F87171; --color-risk-high-bg: #991B1B; --color-risk-medium: #FCD34D; --color-risk-medium-bg: #78350F; --color-risk-low: #60A5FA; --color-risk-low-bg: #1E3A5F; /* === Danger Colors (Dark Mode) === */ --color-danger: #EF4444; --color-danger-light: rgba(239, 68, 68, 0.15); --color-danger-text: #FCA5A5; --color-danger-hover: #F87171; /* === Accent Light (Dark Mode) === */ --color-accent-primary-light: rgba(59, 130, 246, 0.15); /* === Font Size: Medium === */ --font-size-md: 1rem; /* === Background aliases (Dark Mode) === */ --color-bg-primary: var(--color-surface); --color-bg-secondary: var(--color-bg); } /* ---------------------------------------- Theme: Modern Legal Tech (Option B) Dark mode default ---------------------------------------- */ html[data-theme="terminal"] { /* === Colors: Backgrounds === */ --color-bg: #09090B; --color-surface: #18181B; --color-surface-elevated: #27272A; /* === Colors: Text === */ --color-text-primary: #FAFAFA; --color-text-secondary: #A1A1AA; --color-text-muted: #71717A; --color-text-inverse: #09090B; /* === Colors: Accent === */ --color-accent-primary: #06B6D4; --color-accent-secondary: #EAB308; --color-accent-primary-hover: #22D3EE; --color-accent-secondary-hover: #FACC15; /* === Colors: Semantic === */ --color-success: #22C55E; --color-success-bg: #14532D; --color-success-text: #86EFAC; --color-warning: #F59E0B; --color-warning-bg: #713F12; --color-warning-text: #FDE68A; --color-error: #EF4444; --color-error-bg: #7F1D1D; --color-error-text: #FCA5A5; --color-info: #06B6D4; --color-info-bg: #164E63; --color-info-text: #A5F3FC; /* === Colors: Borders === */ --color-border: #3F3F46; --color-border-strong: #52525B; --color-border-muted: #27272A; /* === Colors: Interactive States === */ --color-focus-ring: rgba(6, 182, 212, 0.4); --color-hover-overlay: rgba(255, 255, 255, 0.05); --color-active-overlay: rgba(255, 255, 255, 0.1); /* === Colors: Shadows === */ --shadow-color: rgba(0, 0, 0, 0.5); /* === Colors: Primary (shorthand aliases - Terminal) === */ --color-primary: #3B82F6; --color-primary-hover: #60A5FA; --color-primary-light: rgba(59, 130, 246, 0.15); --color-primary-ring: rgba(59, 130, 246, 0.3); --color-surface-hover: #334155; /* === Colors: Semantic Light Backgrounds (Terminal) === */ --color-success-light: rgba(34, 197, 94, 0.15); --color-warning-light: rgba(245, 158, 11, 0.15); --color-error-light: rgba(239, 68, 68, 0.15); --color-info-light: rgba(96, 165, 250, 0.15); /* === Risk Severity Colors (Terminal Dark) === */ --color-risk-critical: #FCA5A5; --color-risk-critical-bg: #7F1D1D; --color-risk-high: #F87171; --color-risk-high-bg: #991B1B; --color-risk-medium: #FCD34D; --color-risk-medium-bg: #78350F; --color-risk-low: #22D3EE; --color-risk-low-bg: #164E63; --color-danger: #EF4444; --color-danger-light: rgba(239, 68, 68, 0.15); --color-danger-text: #FCA5A5; --color-danger-hover: #F87171; --color-accent-primary-light: rgba(6, 182, 212, 0.15); --font-size-md: 1rem; --color-bg-primary: var(--color-surface); --color-bg-secondary: var(--color-bg); } /* ---------------------------------------- Theme: Modern Legal Tech - Light Mode ---------------------------------------- */ html[data-theme="terminal"][data-mode="light"] { /* === Colors: Backgrounds === */ --color-bg: #FAFAFA; --color-surface: #FFFFFF; --color-surface-elevated: #FFFFFF; /* === Colors: Text === */ --color-text-primary: #18181B; --color-text-secondary: #71717A; --color-text-muted: #A1A1AA; --color-text-inverse: #FAFAFA; /* === Colors: Accent === */ --color-accent-primary: #0891B2; --color-accent-secondary: #CA8A04; --color-accent-primary-hover: #0E7490; --color-accent-secondary-hover: #A16207; /* === Colors: Semantic === */ --color-success: #16A34A; --color-success-bg: #DCFCE7; --color-success-text: #166534; --color-warning: #D97706; --color-warning-bg: #FEF3C7; --color-warning-text: #92400E; --color-error: #DC2626; --color-error-bg: #FEE2E2; --color-error-text: #991B1B; --color-info: #0891B2; --color-info-bg: #CFFAFE; --color-info-text: #155E75; /* === Colors: Borders === */ --color-border: #E4E4E7; --color-border-strong: #D4D4D8; --color-border-muted: #F4F4F5; /* === Colors: Interactive States === */ --color-focus-ring: rgba(8, 145, 178, 0.3); --color-hover-overlay: rgba(0, 0, 0, 0.04); --color-active-overlay: rgba(0, 0, 0, 0.08); /* === Colors: Shadows === */ --shadow-color: rgba(0, 0, 0, 0.1); /* === Colors: Primary (shorthand aliases - Terminal Light) === */ --color-primary: #0D9488; --color-primary-hover: #0F766E; --color-primary-light: rgba(13, 148, 136, 0.08); --color-primary-ring: rgba(13, 148, 136, 0.25); --color-surface-hover: #F1F5F9; /* === Colors: Semantic Light Backgrounds (Terminal Light) === */ --color-success-light: rgba(5, 150, 105, 0.08); --color-warning-light: rgba(217, 119, 6, 0.08); --color-error-light: rgba(220, 38, 38, 0.08); --color-info-light: rgba(8, 145, 178, 0.08); /* === Risk Severity Colors (Terminal Light) === */ --color-risk-critical: #991B1B; --color-risk-critical-bg: #FEE2E2; --color-risk-high: #B91C1C; --color-risk-high-bg: #FEE2E2; --color-risk-medium: #B45309; --color-risk-medium-bg: #FEF3C7; --color-risk-low: #0891B2; --color-risk-low-bg: #CFFAFE; --color-danger: #DC2626; --color-danger-light: rgba(220, 38, 38, 0.08); --color-danger-text: #991B1B; --color-danger-hover: #B91C1C; --color-accent-primary-light: rgba(6, 182, 212, 0.08); --font-size-md: 1rem; --color-bg-primary: var(--color-surface); --color-bg-secondary: var(--color-bg); } /* ============================================ RTL (Right-to-Left) Support for Arabic ============================================ */ /* Note: Noto Sans Arabic font is imported at the top of this file */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text-primary); line-height: var(--line-height-normal); transition: background-color var(--transition-normal), color var(--transition-normal); } .container { max-width: 1200px; margin: 0 auto; padding: 2rem; min-height: 100vh; display: flex; flex-direction: column; } .header { text-align: center; padding: 2rem 0; border-bottom: 2px solid var(--color-border); margin-bottom: 2rem; } .header h1 { font-size: 2.5rem; color: var(--color-accent-primary); margin-bottom: 0.5rem; } .tagline { font-size: 1.2rem; color: var(--color-text-secondary); } .main { flex: 1; display: grid; gap: 2rem; } /* Section styles */ .upload-section, .contracts-section, .status-section, .features-section { background: white; padding: 1.5rem; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .upload-section h2, .contracts-section h2, .status-section h2, .features-section h2 { color: var(--color-text-primary); margin-bottom: 1rem; font-size: 1.25rem; } /* Upload Component Styles */ .upload-container { width: 100%; } .upload-zone { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; cursor: pointer; transition: all var(--transition-normal); background-color: var(--color-bg); position: relative; } .upload-zone:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); } .upload-zone:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3); } .upload-zone.drag-over { border-color: var(--color-primary); background-color: var(--color-primary-light); transform: scale(1.01); box-shadow: 0 4px 12px rgba(49, 130, 206, 0.2); } .upload-zone.uploading { border-style: solid; cursor: default; } .upload-input { display: none; } /* Upload prompt styles */ .upload-prompt { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .upload-icon { color: var(--color-primary); margin-bottom: 0.5rem; } .upload-text { font-size: 1.1rem; color: var(--color-text-primary); } .upload-subtext { font-size: 0.95rem; color: var(--color-text-muted); } .upload-formats { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.5rem; } /* Upload progress styles */ .upload-progress { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .upload-file-icon { color: var(--color-primary); margin-bottom: 0.5rem; } .upload-file-name { font-weight: 600; color: var(--color-text-primary); word-break: break-all; max-width: 100%; } .upload-file-size { font-size: 0.875rem; color: var(--color-text-muted); } .progress-bar-container { width: 100%; max-width: 300px; height: 8px; background-color: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; margin: 0.5rem 0; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); border-radius: var(--radius-sm); transition: width var(--transition-normal); } .upload-status { font-size: 0.9rem; color: var(--color-primary); font-weight: 500; } /* Error styles */ .upload-error { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; padding: 0.75rem 1rem; background-color: var(--color-error-bg); border: 1px solid var(--color-error); border-radius: var(--radius-md); color: var(--color-error); } .error-icon { flex-shrink: 0; display: flex; align-items: center; } .error-message { flex: 1; font-size: 0.9rem; } .error-dismiss { flex-shrink: 0; background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--color-error); display: flex; align-items: center; opacity: 0.7; transition: opacity var(--transition-normal); } .error-dismiss:hover { opacity: 1; } /* Contracts list styles */ .no-contracts { color: var(--color-text-muted); text-align: center; padding: 2rem; background-color: var(--color-bg); border-radius: var(--radius-md); } .contracts-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .contract-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background-color: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); transition: border-color var(--transition-normal); } .contract-item:hover { border-color: var(--color-border-strong); } .contract-icon { flex-shrink: 0; color: var(--color-primary); } .contract-info { flex: 1; min-width: 0; } .contract-name { font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contract-size { font-size: 0.8rem; color: var(--color-text-muted); } .contract-status { flex-shrink: 0; font-size: 0.8rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-weight: 500; } .contract-status.status-success { background-color: var(--color-success-bg); color: var(--color-success-text); } .contract-status.status-uploading { background-color: var(--color-info-bg); color: var(--color-accent-primary-hover); } .contract-status.status-error { background-color: var(--color-error-bg); color: var(--color-error); } /* Status section styles */ .status-card { padding: 1rem; background: var(--color-bg); border-radius: var(--radius-sm); } .status-card p { margin-bottom: 0.5rem; } .status-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; } .status-badge.ok { background-color: var(--color-success-bg); color: var(--color-success-text); } .error { color: var(--color-error); } /* Features section styles */ .features-list { list-style: none; } .features-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); padding-left: 1.5rem; position: relative; } .features-list li:last-child { border-bottom: none; } .features-list li::before { content: ">"; position: absolute; left: 0; color: var(--color-primary); font-weight: bold; } /* Footer styles */ .footer { text-align: center; padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid var(--color-border); color: var(--color-text-muted); } /* Responsive grid layout */ @media (min-width: 768px) { .main { grid-template-columns: 1fr 1fr; } .upload-section { grid-column: 1 / -1; } } @media (min-width: 1024px) { .main { grid-template-columns: repeat(2, 1fr); } .upload-section { grid-column: 1; } .contracts-section { grid-column: 2; } } /* Contract List Dashboard Styles */ .dashboard-section { background: white; padding: 1.5rem; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); grid-column: 1 / -1; } .dashboard-section h2 { color: var(--color-text-primary); margin-bottom: 1rem; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; } /* Contract List Loading */ .contract-list-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-text-muted); } .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 1s linear infinite; margin-bottom: 1rem; } @keyframes spin { to { transform: rotate(360deg); } } /* Contract List Error */ .contract-list-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--color-error); background-color: var(--color-error-light); border-radius: var(--radius-md); border: 1px solid var(--color-error-bg); gap: 0.75rem; } .retry-button { margin-top: 0.5rem; padding: 0.625rem 1.375rem; background-color: var(--color-accent-primary); color: var(--color-text-inverse); border: 1.5px solid var(--color-accent-primary); border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .retry-button:hover { background-color: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } /* Contract List Empty */ .contract-list-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-text-muted); background-color: var(--color-bg); border-radius: var(--radius-md); } .contract-list-empty svg { margin-bottom: 1rem; opacity: 0.5; } .contract-list-empty-hint { font-size: 0.9rem; margin-top: 0.25rem; } /* Contract Table */ .contract-list { overflow-x: auto; } .contract-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .contract-table thead { background-color: var(--color-bg); } .contract-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: var(--color-text-secondary); border-bottom: 2px solid var(--color-border); white-space: nowrap; } .contract-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .contract-row { cursor: pointer; transition: background-color var(--transition-fast); } .contract-row:hover { background-color: var(--color-primary-light); } .contract-row:focus { outline: none; background-color: var(--color-primary-light); box-shadow: inset 0 0 0 2px var(--color-primary); } /* Filename Cell */ .filename-cell { display: flex; align-items: center; gap: 0.5rem; } .file-icon { flex-shrink: 0; color: var(--color-primary); } .filename-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; color: var(--color-text-primary); font-weight: 500; } /* Inline Rename Input */ .inline-rename-input { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; padding: 0.25rem 0.5rem; border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-primary); outline: none; box-shadow: 0 0 0 2px var(--color-primary-ring); min-width: 120px; max-width: 280px; width: 100%; } .inline-rename-detail { font-size: 1.25rem; padding: 0.3rem 0.6rem; max-width: 400px; color: var(--color-accent-primary); font-weight: 600; } /* Pencil icon for rename in contract list */ .btn-rename-inline { opacity: 0; padding: 0.2rem; margin-left: 0.25rem; flex-shrink: 0; color: var(--color-text-muted); transition: opacity var(--transition-fast), color var(--transition-fast); } .filename-cell:hover .btn-rename-inline, .btn-rename-inline:focus { opacity: 1; } .btn-rename-inline:hover { color: var(--color-primary); } /* Editable filename in contract detail header */ .editable-filename { cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: color var(--transition-fast); } .editable-filename .pencil-icon-hover { opacity: 0; flex-shrink: 0; color: var(--color-text-muted); transition: opacity var(--transition-fast); } .editable-filename:hover .pencil-icon-hover { opacity: 0.7; } .editable-filename:hover { color: var(--color-accent-primary-hover); } /* Header Actions - spacing fix */ .header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } /* Delete button in contract detail - ghost/outline style */ .btn-delete-contract-detail { background: transparent; color: var(--color-text-muted); border: 1.5px solid var(--color-border-strong); margin-left: 1rem; box-shadow: none; } .btn-delete-contract-detail:hover:not(:disabled) { background: var(--color-error-light); color: var(--color-error); border-color: var(--color-error); box-shadow: none; transform: none; } .btn-delete-contract-detail:active:not(:disabled) { background: var(--color-error-bg); } /* Delete confirm group spacing */ .delete-confirm-group { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; } .delete-confirm-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-weight: 500; white-space: nowrap; } /* Dark mode overrides for inline rename and delete button */ html[data-theme="clean"][data-mode="dark"] .inline-rename-input, html:not([data-theme])[data-mode="dark"] .inline-rename-input, html[data-theme="terminal"] .inline-rename-input { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-primary); } html[data-theme="clean"][data-mode="dark"] .btn-delete-contract-detail, html:not([data-theme])[data-mode="dark"] .btn-delete-contract-detail, html[data-theme="terminal"] .btn-delete-contract-detail { color: var(--color-text-muted); border-color: var(--color-border-strong); } html[data-theme="clean"][data-mode="dark"] .btn-delete-contract-detail:hover:not(:disabled), html:not([data-theme])[data-mode="dark"] .btn-delete-contract-detail:hover:not(:disabled), html[data-theme="terminal"] .btn-delete-contract-detail:hover:not(:disabled) { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger); } /* Language Badge */ .language-badge { display: inline-block; padding: 0.2rem 0.5rem; background-color: var(--color-border); color: var(--color-text-secondary); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* OCR Badge */ .ocr-badge { display: inline-block; padding: 0.2rem 0.5rem; background-color: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* Status Badges */ .status-badge.status-pending { background-color: var(--color-border); color: var(--color-text-secondary); } .status-badge.status-processing { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .status-badge.status-completed { background-color: var(--color-success-bg); color: var(--color-success-text); } .status-badge.status-error { background-color: var(--color-error-bg); color: var(--color-error); } /* Signing Status Badges for Contract List */ .contract-signing-cell { white-space: nowrap; } .signing-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } .signing-badge .signing-icon { font-size: 0.85em; } .signing-badge.signing-draft { background-color: var(--color-border); color: var(--color-text-secondary); } .signing-badge.signing-sent { background-color: var(--color-info-bg); color: var(--color-accent-primary-hover); } .signing-badge.signing-in-progress { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .signing-badge.signing-completed { background-color: var(--color-success-bg); color: var(--color-success-text); } .signing-badge.signing-declined { background-color: var(--color-error-bg); color: var(--color-error); } .signing-badge.signing-voided { background-color: var(--color-error-bg); color: var(--color-error); } /* Contract Date */ .contract-date { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; } /* Selected Contract Info */ .selected-contract-info { margin-top: 1rem; padding: 0.75rem 1rem; background-color: var(--color-primary-light); border: 1px solid var(--color-info); border-radius: var(--radius-sm); color: var(--color-accent-primary-hover); font-size: 0.9rem; } /* Responsive adjustments for contract table */ @media (max-width: 640px) { .contract-table th, .contract-table td { padding: 0.5rem; } .filename-text { max-width: 120px; } .contract-date { font-size: 0.75rem; } } /* ============================== Risk Panel Styles ============================== */ .risk-panel { background: white; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; } .risk-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg); } .risk-panel-header h3 { margin: 0; font-size: 1.25rem; color: var(--color-text-primary); } .risk-panel-actions { display: flex; gap: 0.5rem; } .risk-action-btn { padding: 0.4375rem 0.875rem; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background-color: var(--color-surface); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .risk-action-btn:hover:not(:disabled) { background-color: var(--color-bg); border-color: var(--color-accent-primary); color: var(--color-accent-primary); transform: translateY(-0.5px); } .risk-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Risk Summary */ .risk-summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } .risk-summary-total { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); } .risk-summary-counts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .risk-count { padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-sm); } .risk-count-critical { background-color: var(--color-risk-critical); color: white; } .risk-count-high { background-color: var(--color-error); color: white; } .risk-count-medium { background-color: var(--color-warning); color: var(--color-warning-text); } .risk-count-low { background-color: var(--color-primary); color: white; } /* Risk List */ .risk-list { padding: 0.5rem; } /* Risk Item */ .risk-item { margin: 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); overflow: hidden; transition: box-shadow var(--transition-normal); } .risk-item:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Severity-based border colors */ .risk-item.risk-severity-critical { border-left: 4px solid var(--color-risk-critical); } .risk-item.risk-severity-high { border-left: 4px solid var(--color-error); } .risk-item.risk-severity-medium { border-left: 4px solid var(--color-warning); } .risk-item.risk-severity-low { border-left: 4px solid var(--color-primary); } /* Risk Header (clickable) */ .risk-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; transition: background-color var(--transition-normal); } .risk-header:hover { background-color: var(--color-bg); } .risk-header:focus { outline: none; background-color: var(--color-surface-hover); } .risk-header-content { display: flex; align-items: center; gap: 0.75rem; } .risk-severity-badge { display: inline-block; padding: 0.25rem 0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; border-radius: var(--radius-sm); } .risk-severity-badge.risk-severity-critical { background-color: var(--color-risk-critical); color: white; } .risk-severity-badge.risk-severity-high { background-color: var(--color-error); color: white; } .risk-severity-badge.risk-severity-medium { background-color: var(--color-warning); color: var(--color-warning-text); } .risk-severity-badge.risk-severity-low { background-color: var(--color-primary); color: white; } .risk-type { font-size: 0.95rem; font-weight: 500; color: var(--color-text-primary); } .risk-chevron { display: flex; align-items: center; color: var(--color-text-muted); transition: transform var(--transition-normal); } .risk-chevron.expanded { transform: rotate(180deg); } /* Risk Details (expandable) */ .risk-details { padding: 1rem; padding-top: 0; background-color: var(--color-bg); border-top: 1px solid var(--color-border); animation: riskSlideDown 0.2s ease-out; } @keyframes riskSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .risk-explanation, .risk-clause { padding: 1rem 0; } .risk-explanation { border-bottom: 1px solid var(--color-border); } .risk-explanation h4, .risk-clause h4 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 0.5rem; } .risk-explanation p { font-size: 0.95rem; color: var(--color-text-secondary); line-height: 1.6; } .risk-clause blockquote { margin: 0; padding: 0.75rem 1rem; background-color: var(--color-surface-hover); border-left: 3px solid var(--color-text-muted); border-radius: 0 4px 4px 0; font-size: 0.9rem; color: var(--color-text-secondary); font-style: italic; line-height: 1.5; } /* Loading State */ .risk-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; gap: 1rem; } .risk-loading-spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } .risk-loading p { color: var(--color-text-muted); font-size: 0.95rem; } /* Error State */ .risk-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; gap: 0.75rem; color: var(--color-error); } .risk-error svg { opacity: 0.8; } .risk-error p { font-size: 0.95rem; } /* Empty State */ .risk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; gap: 1rem; color: var(--color-success); } .risk-empty svg { opacity: 0.7; } .risk-empty p { color: var(--color-text-muted); font-size: 0.95rem; } /* Responsive adjustments for Risk Panel */ @media (max-width: 640px) { .risk-panel-header { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .risk-summary { flex-direction: column; align-items: flex-start; } .risk-header-content { flex-wrap: wrap; } .risk-type { width: 100%; margin-top: 0.25rem; } } /* ============================================ Contract Detail View Styles ============================================ */ .contract-detail { background: white; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; } /* Loading State */ .contract-detail-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: var(--color-text-muted); } /* Error State */ .contract-detail-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; color: var(--color-error); text-align: center; } .contract-detail-error svg { margin-bottom: 1rem; opacity: 0.7; } /* Header */ .contract-detail-header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } .btn-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-normal); } .btn-back:hover { background-color: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .contract-detail-title { flex: 1; min-width: 0; } .contract-detail-title h2 { font-size: 1.25rem; color: var(--color-accent-primary); margin: 0 0 0.5rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contract-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .date-info { font-size: 0.85rem; color: var(--color-text-muted); } /* Analyze Button */ .analyze-btn { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; } /* Buttons - Unified Design System */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 8px 16px; font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; line-height: 1.25; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); letter-spacing: 0; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } .btn-primary { background-color: var(--color-accent-primary); color: var(--color-text-inverse); border-color: var(--color-accent-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05); } .btn-primary:hover:not(:disabled) { background-color: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05); transform: translateY(-1px); } .btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-primary:disabled { background-color: var(--color-border); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; box-shadow: none; } .btn-secondary { background-color: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-secondary:hover:not(:disabled) { background-color: var(--color-surface-hover); border-color: var(--color-border-strong); color: var(--color-text-primary); box-shadow: none; } .btn-secondary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-secondary:disabled { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; } .btn-danger { background-color: var(--color-error); color: var(--color-text-inverse); border-color: var(--color-error); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-danger:hover:not(:disabled) { background-color: var(--color-error-text); border-color: var(--color-error-text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } .btn-danger:active:not(:disabled) { transform: translateY(0); } .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; } .btn-google-docs { background-color: #4285f4; color: #fff; border-color: #4285f4; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-google-docs:hover:not(:disabled) { background-color: #3367d6; border-color: #3367d6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } .btn-google-docs:active:not(:disabled) { transform: translateY(0); } .btn-google-docs:disabled { opacity: 0.5; cursor: not-allowed; } .btn-ghost { background-color: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background-color: var(--color-hover-overlay); color: var(--color-text-primary); } .btn-ghost:active:not(:disabled) { background-color: var(--color-active-overlay); } .btn-sm { padding: 5px 10px; font-size: 13px; border-radius: var(--radius-sm); } .btn-lg { padding: 12px 24px; font-size: 15px; border-radius: var(--radius-md); } .btn-icon { padding: 0.5rem; border-radius: var(--radius-md); background: transparent; border: 1.5px solid transparent; color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; } .btn-icon:hover:not(:disabled) { background: var(--color-hover-overlay); color: var(--color-text-primary); } .btn-icon:active:not(:disabled) { background: var(--color-active-overlay); } /* Alert Messages */ .contract-detail-alert { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; margin: 1rem 1.5rem 0; border-radius: var(--radius-sm); } .contract-detail-alert.error { background-color: var(--color-error-bg); border: 1px solid var(--color-error); color: var(--color-error); } .contract-detail-alert.success { background-color: #e8f5e9; border: 1px solid #4caf50; color: #2e7d32; } .contract-detail-alert button { margin-left: auto; background: none; border: none; cursor: pointer; padding: 0.25rem; display: flex; align-items: center; opacity: 0.7; transition: opacity var(--transition-normal); } .contract-detail-alert button:hover { opacity: 1; } /* Tabs */ .contract-tabs { display: flex; padding: 0 1.5rem; border-bottom: 1px solid var(--color-border); background-color: white; } .tab-btn { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.25rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--transition-normal); } .tab-btn:hover:not(:disabled) { color: var(--color-primary); } .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab-btn:disabled { color: var(--color-text-muted); cursor: not-allowed; } .tab-btn svg { flex-shrink: 0; } /* Tab Content */ .tab-content { padding: 1.5rem; } .tab-panel { animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tab-panel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-text-muted); text-align: center; } .tab-panel-empty svg { margin-bottom: 1rem; opacity: 0.5; } .tab-panel-empty .hint { font-size: 0.9rem; margin-top: 0.5rem; } .tab-panel-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-error); text-align: center; gap: var(--spacing-sm); } .tab-panel-error svg { margin-bottom: var(--spacing-sm); opacity: 0.7; } .tab-panel-error p { color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); } .tab-panel-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-text-muted); } /* Spinner */ .spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: var(--radius-full); animation: spin 1s linear infinite; margin-bottom: 1rem; } .spinner-small { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: var(--radius-full); animation: spin 0.8s linear infinite; } /* ============================================ Extractions View Styles ============================================ */ .extractions-view { display: flex; flex-direction: column; gap: 1.5rem; } .extractions-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; color: var(--color-text-muted); text-align: center; } .extractions-empty svg { margin-bottom: 1rem; opacity: 0.5; } .extractions-empty-hint { font-size: 0.9rem; margin-top: 0.5rem; } /* Extraction Groups */ .extraction-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .extraction-group-title { padding: 0.75rem 1rem; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); font-size: 0.9rem; font-weight: 600; color: var(--color-text-primary); margin: 0; } .extraction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background-color: var(--color-border); } /* Extraction Item */ .extraction-item { padding: 1rem; background-color: white; } .extraction-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .extraction-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .extraction-value { font-size: 1rem; color: var(--color-text-primary); font-weight: 500; word-break: break-word; } .extraction-value.empty { color: var(--color-text-muted); font-style: italic; font-weight: normal; } .extraction-footer { margin-top: 0.75rem; } /* Confidence Indicator */ .confidence-indicator { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .confidence-bar-container { width: 50px; height: 6px; background-color: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .confidence-bar { height: 100%; border-radius: var(--radius-sm); transition: width var(--transition-slow); } .confidence-bar.confidence-high { background-color: var(--color-success); } .confidence-bar.confidence-medium { background-color: var(--color-warning); } .confidence-bar.confidence-low { background-color: var(--color-error); } .confidence-label { font-size: 0.75rem; font-weight: 600; min-width: 32px; } .confidence-label.confidence-high { color: var(--color-success-text); } .confidence-label.confidence-medium { color: var(--color-warning-text); } .confidence-label.confidence-low { color: var(--color-error); } /* Source Popover */ .source-container { position: relative; display: inline-block; } .source-toggle { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background-color: var(--color-surface-hover); border: none; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: 0.75rem; cursor: pointer; transition: all var(--transition-normal); } .source-toggle:hover { background-color: var(--color-border); color: var(--color-primary); } .source-popover { position: absolute; bottom: 100%; left: 0; margin-bottom: 0.5rem; padding: 0.75rem; background-color: var(--color-text-primary); color: white; border-radius: var(--radius-sm); font-size: 0.85rem; max-width: 300px; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); animation: popoverIn 0.2s ease; } @keyframes popoverIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .source-popover::after { content: ""; position: absolute; top: 100%; left: 16px; border: 6px solid transparent; border-top-color: var(--color-text-primary); } .source-content { line-height: 1.5; } /* Obligations Section */ .obligations-section { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .obligations-section > .extraction-header { padding: 0.75rem 1rem; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); margin: 0; } .obligations-list { list-style: none; padding: 0; margin: 0; } .obligation-item { padding: 1rem; border-bottom: 1px solid var(--color-border); } .obligation-item:last-child { border-bottom: none; } .obligation-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .obligation-party { font-weight: 600; color: var(--color-primary); font-size: 0.9rem; } .obligation-text { color: var(--color-text-primary); line-height: 1.5; } .obligation-deadline { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.5rem; padding: 0.25rem 0.5rem; background-color: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; } .obligation-footer { margin-top: 0.75rem; } /* ============================================ Risks Tab View Styles (in Contract Detail) ============================================ */ .risks-list { display: flex; flex-direction: column; gap: 1rem; } .risk-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; border-left: 4px solid; } .risk-card.severity-low { border-left-color: var(--color-risk-low); } .risk-card.severity-medium { border-left-color: var(--color-risk-medium); } .risk-card.severity-high { border-left-color: var(--color-risk-high); } .risk-card.severity-critical { border-left-color: var(--color-risk-critical); } .risk-card .risk-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } .risk-card .risk-type { font-weight: 600; color: var(--color-text-primary); text-transform: capitalize; } .severity-badge { padding: 0.2rem 0.6rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .severity-badge.severity-low { background-color: var(--color-risk-low-bg); color: var(--color-risk-low); } .severity-badge.severity-medium { background-color: var(--color-risk-medium-bg); color: var(--color-risk-medium); } .severity-badge.severity-high { background-color: var(--color-risk-high-bg); color: var(--color-risk-high); } .severity-badge.severity-critical { background-color: var(--color-risk-critical-bg); color: var(--color-risk-critical); } .risk-card .risk-clause { padding: 1rem; border-bottom: 1px solid var(--color-border); } .risk-card .risk-clause strong { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .risk-card .risk-clause blockquote { margin: 0; padding: 0.75rem; background-color: var(--color-bg); border-left: 3px solid var(--color-border-strong); color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; font-style: italic; } .risk-card .risk-explanation { padding: 1rem; } .risk-card .risk-explanation strong { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.5rem; } .risk-card .risk-explanation p { margin: 0; color: var(--color-text-primary); line-height: 1.5; } /* ============================================ Summary View Styles ============================================ */ .summary-content { padding: 1rem; background-color: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .summary-text { color: var(--color-text-primary); line-height: 1.7; white-space: pre-wrap; } /* ============================================ Contract Detail Responsive Adjustments ============================================ */ @media (max-width: 640px) { .contract-detail-header { flex-wrap: wrap; padding: 1rem; } .contract-detail-title h2 { font-size: 1.1rem; } .contract-meta { width: 100%; margin-top: 0.5rem; } .analyze-btn { width: 100%; margin-top: 1rem; justify-content: center; } .contract-tabs { padding: 0 1rem; overflow-x: auto; } .tab-btn { padding: 0.75rem 1rem; font-size: 0.85rem; } .tab-content { padding: 1rem; } .extraction-grid { grid-template-columns: 1fr; } .source-popover { max-width: 250px; } } /* ============================================ RTL (Right-to-Left) Support Styles ============================================ */ /* Arabic font stack for RTL content */ .rtl-content, [dir="rtl"], [lang="ar"] { font-family: 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', sans-serif; direction: rtl; text-align: right; } /* RTL text class for inline use */ .rtl-text { direction: rtl; text-align: right; unicode-bidi: isolate; } /* LTR text class for inline use */ .ltr-text { direction: ltr; text-align: left; unicode-bidi: isolate; } /* Mixed content container - allows proper rendering of mixed LTR/RTL */ .mixed-content { unicode-bidi: plaintext; } /* RTL adjustments for contract table */ [dir="rtl"] .contract-table th { text-align: right; } [dir="rtl"] .filename-cell { flex-direction: row-reverse; } [dir="rtl"] .file-icon { margin-left: 0.5rem; margin-right: 0; } /* RTL adjustments for extraction view */ [dir="rtl"] .extraction-header { flex-direction: row-reverse; } [dir="rtl"] .extraction-label { text-align: right; } [dir="rtl"] .extraction-value, .extraction-value[dir="rtl"] { text-align: right; direction: rtl; unicode-bidi: isolate; } [dir="rtl"] .confidence-indicator { flex-direction: row-reverse; } /* RTL adjustments for obligations */ .obligation-text[dir="rtl"], .obligation-party[dir="rtl"], [dir="rtl"] .obligation-text, [dir="rtl"] .obligation-header { flex-direction: row-reverse; } [dir="rtl"] .obligation-party { text-align: right; } [dir="rtl"] .obligation-text { text-align: right; } [dir="rtl"] .obligation-deadline { flex-direction: row-reverse; } /* RTL adjustments for risk panel */ [dir="rtl"] .risk-header { text-align: right; } [dir="rtl"] .risk-header-content { flex-direction: row-reverse; } [dir="rtl"] .risk-type { text-align: right; } [dir="rtl"] .risk-explanation p { text-align: right; } [dir="rtl"] .risk-clause blockquote { border-left: none; border-right: 3px solid var(--color-text-muted); border-radius: var(--radius-sm) 0 0 4px; text-align: right; } [dir="rtl"] .risk-item.risk-severity-critical, [dir="rtl"] .risk-item.risk-severity-high, [dir="rtl"] .risk-item.risk-severity-medium, [dir="rtl"] .risk-item.risk-severity-low { border-left: 1px solid var(--color-border); border-right-width: 4px; border-right-style: solid; } [dir="rtl"] .risk-item.risk-severity-critical { border-right-color: var(--color-risk-critical); } [dir="rtl"] .risk-item.risk-severity-high { border-right-color: var(--color-error); } [dir="rtl"] .risk-item.risk-severity-medium { border-right-color: var(--color-warning); } [dir="rtl"] .risk-item.risk-severity-low { border-right-color: var(--color-primary); } /* RTL adjustments for contract detail */ [dir="rtl"] .contract-detail-header { flex-direction: row-reverse; } [dir="rtl"] .contract-meta { flex-direction: row-reverse; } [dir="rtl"] .contract-detail-title h2 { text-align: right; } [dir="rtl"] .btn-back { transform: scaleX(-1); } /* RTL adjustments for tabs */ [dir="rtl"] .contract-tabs { flex-direction: row-reverse; } [dir="rtl"] .tab-btn { flex-direction: row-reverse; } /* RTL adjustments for summary */ [dir="rtl"] .summary-text { text-align: right; } /* RTL adjustments for risk cards */ [dir="rtl"] .risk-card { border-left: 1px solid var(--color-border); border-right: 4px solid; } [dir="rtl"] .risk-card.severity-low { border-right-color: var(--color-risk-low); } [dir="rtl"] .risk-card.severity-medium { border-right-color: var(--color-risk-medium); } [dir="rtl"] .risk-card.severity-high { border-right-color: var(--color-risk-high); } [dir="rtl"] .risk-card.severity-critical { border-right-color: var(--color-risk-critical); } [dir="rtl"] .risk-card .risk-header { flex-direction: row-reverse; } [dir="rtl"] .risk-card .risk-clause blockquote { border-left: none; border-right: 3px solid var(--color-border-strong); } /* RTL adjustments for features list */ [dir="rtl"] .features-list li { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .features-list li::before { left: auto; right: 0; content: "<"; } /* RTL adjustments for source popover */ [dir="rtl"] .source-popover { left: auto; right: 0; } [dir="rtl"] .source-popover::after { left: auto; right: 16px; } [dir="rtl"] .source-toggle { flex-direction: row-reverse; } /* RTL adjustments for error messages */ [dir="rtl"] .upload-error { flex-direction: row-reverse; } [dir="rtl"] .error-message { text-align: right; } [dir="rtl"] .contract-detail-alert { flex-direction: row-reverse; } /* RTL adjustments for upload zone */ [dir="rtl"] .upload-prompt { text-align: right; } /* RTL adjustments for status cards */ [dir="rtl"] .status-card p { text-align: right; } /* Utility class for automatic text direction detection */ .auto-dir { unicode-bidi: plaintext; } /* RTL-aware margin/padding utilities */ [dir="rtl"] .ms-auto { margin-left: 0; margin-right: auto; } [dir="rtl"] .me-auto { margin-right: 0; margin-left: auto; } /* Ensure proper text rendering for mixed content */ .bidi-override { unicode-bidi: bidi-override; } .bidi-isolate { unicode-bidi: isolate; } .bidi-embed { unicode-bidi: embed; } /* ============================================ DocuSign Mock Signing Workflow Styles ============================================ */ .signing-panel { display: flex; flex-direction: column; gap: 1.5rem; } .signing-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: var(--color-accent-primary); border-radius: var(--radius-lg); color: var(--color-text-inverse); } .signing-status-display { display: flex; align-items: center; gap: 1rem; } .docusign-logo { display: flex; align-items: center; gap: 0.5rem; } .docusign-brand { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; } .signing-status-badge { padding: 0.35rem 0.75rem; border-radius: var(--radius-2xl); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .signing-status-badge.status-draft { background-color: rgba(255, 255, 255, 0.2); color: white; } .signing-status-badge.status-sent { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .signing-status-badge.status-in_progress { background-color: var(--color-info); color: #FFFFFF; } .signing-status-badge.status-completed { background-color: var(--color-success); color: #FFFFFF; } .signing-status-badge.status-declined { background-color: var(--color-error); color: #FFFFFF; } .signing-status-badge.status-voided { background-color: var(--color-text-muted); color: var(--color-text-primary); } .btn-send-signature { display: flex; align-items: center; gap: 0.5rem; background: var(--color-accent-secondary); color: var(--color-text-inverse); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); border: 1.5px solid var(--color-accent-secondary); padding: 0.625rem 1.375rem; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-send-signature:hover:not(:disabled) { background: var(--color-accent-secondary-hover); border-color: var(--color-accent-secondary-hover); transform: translateY(-0.5px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); } .btn-send-signature:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Signing Progress */ .signing-progress { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.5rem; } .signing-progress h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: var(--color-text-primary); } .signing-progress-hint { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 1.5rem 0; } /* Signers List */ .signers-list { display: flex; flex-direction: column; gap: 0.75rem; } .signer-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg); transition: all var(--transition-normal); } .signer-card.signer-status-viewed, .signer-card.signer-status-sent { background-color: var(--color-success-light); border-color: var(--color-warning-bg); } .signer-card.signer-status-signed { background-color: var(--color-success-light); border-color: var(--color-success); } .signer-order { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background-color: var(--color-primary); color: white; border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem; flex-shrink: 0; } .signer-card.signer-status-signed .signer-order { background-color: var(--color-success); } .signer-info { flex: 1; min-width: 0; } .signer-name { font-weight: 600; color: var(--color-text-primary); font-size: 0.95rem; } .signer-email { color: var(--color-text-muted); font-size: 0.85rem; } .signer-role { color: var(--color-text-muted); font-size: 0.8rem; margin-top: 0.25rem; } .signer-status { flex-shrink: 0; } .signer-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-2xl); font-size: 0.75rem; font-weight: 600; } .signer-badge.pending { background-color: var(--color-border); color: var(--color-text-muted); } .signer-badge.sent { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .signer-badge.viewed { background-color: var(--color-info-bg); color: var(--color-primary); } .signer-badge.signed { background-color: var(--color-success-bg); color: var(--color-success-text); } .signed-time { margin-left: 0.35rem; font-weight: normal; opacity: 0.8; } .btn-sign-now { flex-shrink: 0; } /* Completion Banner */ .signing-complete-banner { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: linear-gradient(135deg, var(--color-success-light) 0%, var(--color-success-bg) 100%); border: 1px solid var(--color-success); border-radius: var(--radius-md); } .signing-complete-banner svg { color: var(--color-success); flex-shrink: 0; } .signing-complete-text h4 { margin: 0 0 0.5rem 0; color: var(--color-success-text); font-size: 1.1rem; } .signing-complete-text p { margin: 0 0 0.75rem 0; color: var(--color-success-text); font-size: 0.9rem; } .sharepoint-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background-color: white; border: 1px solid var(--color-success); border-radius: var(--radius-sm); color: var(--color-success); font-size: 0.85rem; font-family: var(--font-mono); } .sharepoint-link svg { color: var(--color-success); } /* ============================================ UAE Law Citations Styles ============================================ */ .uae-law-citation { margin-top: 1rem; padding: 1rem; background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-success-light) 100%); border: 1px solid var(--color-info); border-left: 4px solid var(--color-primary); border-radius: 0 6px 6px 0; } .uae-law-citation-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .uae-law-citation-header svg { color: var(--color-primary); } .uae-law-citation-header span { font-size: 0.8rem; font-weight: 600; color: var(--color-accent-primary-hover); text-transform: uppercase; letter-spacing: 0.05em; } .citation-item { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--color-info-bg); } .citation-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .citation-source { font-weight: 600; color: var(--color-accent-primary); font-size: 0.85rem; margin-bottom: 0.25rem; } .citation-text { color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.5; } .citation-recommendation { margin-top: 0.75rem; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.6); border-radius: var(--radius-sm); } .citation-recommendation strong { color: var(--color-success); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .citation-recommendation p { margin: 0.35rem 0 0 0; color: var(--color-success-text); font-size: 0.9rem; } /* ============================================ UI Polish - Enhanced Production Styling ============================================ */ /* Enhanced header - clean, modern design */ .header { background: var(--color-surface); color: var(--color-text-primary); padding: 2.5rem 2rem; border-bottom: 1px solid var(--color-border); border-radius: 0; margin: -2rem -2rem 2rem -2rem; width: calc(100% + 4rem); } .header h1 { color: var(--color-accent-primary); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; } .tagline { color: var(--color-text-secondary); font-size: 1.15rem; } /* Enhanced section cards */ .upload-section, .dashboard-section, .status-section, .features-section { background: white; padding: 1.75rem; border-radius: var(--radius-lg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); border: 1px solid var(--color-border); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .upload-section:hover, .dashboard-section:hover, .status-section:hover, .features-section:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Enhanced section titles */ .upload-section h2, .dashboard-section h2, .status-section h2, .features-section h2 { font-size: 1.35rem; font-weight: 600; color: var(--color-accent-primary); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--color-border); } /* Enhanced upload zone */ .upload-zone { border: 2px dashed var(--color-info); border-radius: var(--radius-xl); padding: 3.5rem 2rem; background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary-light) 100%); } .upload-zone:hover { border-color: var(--color-primary); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-info-bg) 100%); } /* Enhanced buttons */ .btn { padding: 0.65rem 1.35rem; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-md); transition: all var(--transition-normal); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .btn-primary { background: var(--color-accent-primary); color: var(--color-text-inverse); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px rgba(13, 148, 136, 0.25); } .btn-secondary { background: white; color: var(--color-text-secondary); border: 1px solid var(--color-border); } .btn-secondary:hover { background: var(--color-bg); border-color: var(--color-border-strong); } /* Enhanced contract detail header */ .contract-detail-header { background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-hover) 100%); border-bottom: 2px solid var(--color-border); padding: 1.75rem; } .contract-detail-title h2 { font-size: 1.35rem; font-weight: 700; color: var(--color-accent-primary); } /* Enhanced tabs */ .contract-tabs { background: var(--color-bg); padding: 0.5rem 1.5rem 0; } .tab-btn { padding: 1rem 1.5rem; font-weight: 600; border-radius: var(--radius-md) 8px 0 0; margin-right: 0.25rem; transition: all var(--transition-normal); } .tab-btn:hover:not(:disabled) { background-color: white; color: var(--color-primary); } .tab-btn.active { background-color: white; color: var(--color-primary); border-bottom-color: white; box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05); } /* Enhanced status badges */ .status-badge { font-weight: 700; letter-spacing: 0.02em; padding: 0.3rem 0.85rem; border-radius: var(--radius-2xl); font-size: 0.8rem; } /* Enhanced risk cards */ .risk-card { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: all var(--transition-normal); } .risk-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } /* Enhanced footer */ .footer { background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-hover) 100%); padding: 2rem; margin: 2rem -2rem -2rem -2rem; width: calc(100% + 4rem); border-radius: var(--radius-xl) 16px 0 0; text-align: center; color: var(--color-text-secondary); font-weight: 500; } /* Responsive adjustments for enhanced styles */ @media (max-width: 640px) { .header { padding: 2rem 1.5rem; margin: -2rem -1.5rem 1.5rem -1.5rem; width: calc(100% + 3rem); } .header h1 { font-size: 2rem; } .signing-header { flex-direction: column; gap: 1rem; } .signing-status-display { flex-direction: column; text-align: center; } .signer-card { flex-wrap: wrap; } .btn-sign-now { width: 100%; margin-top: 0.75rem; } .footer { margin: 1.5rem -1.5rem -1.5rem -1.5rem; width: calc(100% + 3rem); } } /* ============================================ Theme Toggle Styles ============================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .theme-toggle:hover { background-color: var(--color-surface-elevated); border-color: var(--color-border-strong); color: var(--color-text-primary); transform: scale(1.05); } .theme-toggle:focus { outline: none; box-shadow: 0 0 0 3px var(--color-focus-ring); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .theme-toggle-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; } .theme-toggle-icon svg { transition: transform var(--transition-normal); } .theme-toggle:hover .theme-toggle-icon svg { transform: rotate(15deg); } /* Dark mode specific styling for better visibility */ html[data-mode="dark"] .theme-toggle { background-color: var(--color-surface); border-color: var(--color-border); } html[data-mode="dark"] .theme-toggle:hover { background-color: var(--color-surface-elevated); border-color: var(--color-accent-primary); color: var(--color-accent-primary); } /* ============================================ Theme Switcher Styles ============================================ */ .theme-switcher { display: flex; align-items: center; gap: var(--spacing-xs); } .theme-switcher-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); white-space: nowrap; } .theme-switcher-buttons { display: flex; background-color: var(--color-surface-hover); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .theme-switcher-btn { padding: 0.35rem 0.65rem; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .theme-switcher-btn:hover { color: var(--color-text-primary); background-color: var(--color-hover-overlay); } .theme-switcher-btn.active { color: var(--color-text-primary); background-color: var(--color-surface); } .theme-switcher-btn:disabled { opacity: 0.5; cursor: not-allowed; } .theme-switcher-btn:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-focus-ring); } /* Theme-specific styling for TopNav theme switcher */ .top-nav-theme-switcher { margin-right: var(--spacing-sm); } /* ============================================ New Dashboard Layout Styles ============================================ */ /* App Layout Container */ .app-layout { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-bg); } /* ============================================ TopNav Component Styles ============================================ */ .top-nav { position: sticky; top: 0; z-index: var(--z-sticky); height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--spacing-lg); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 0 var(--color-border); } .top-nav-left { display: flex; align-items: center; gap: var(--spacing-sm); } .top-nav-logo { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-accent-primary); letter-spacing: var(--letter-spacing-tight); } .top-nav-ai-badge { padding: 0.2rem 0.6rem; background: var(--color-accent-primary); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); text-transform: uppercase; letter-spacing: 0.05em; } .top-nav-right { display: flex; align-items: center; gap: var(--spacing-md); } .top-nav-theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .top-nav-theme-toggle:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); } .top-nav-prototype-label { padding: 3px 8px; background-color: var(--color-warning-light); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-semibold); color: var(--color-warning); letter-spacing: 0.05em; text-transform: uppercase; } /* User Menu */ .top-nav-user-menu { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-fast); } .user-menu-trigger:hover { background-color: var(--color-surface-hover); color: var(--color-text-primary); } .user-menu-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-chevron { transition: transform var(--transition-fast); } .user-menu-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: var(--z-dropdown); animation: menuSlideDown 0.15s ease-out; } @keyframes menuSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .user-menu-header { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; } .user-menu-display-name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--font-size-sm); } .user-menu-role { font-size: 11px; color: var(--color-text-muted); text-transform: capitalize; } .user-menu-divider { height: 1px; background: var(--color-border-muted); margin: 0; } .user-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; background: transparent; border: none; color: var(--color-text-secondary); font-size: var(--font-size-sm); cursor: pointer; transition: all var(--transition-fast); text-align: left; } .user-menu-item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .user-menu-logout { color: var(--color-danger, var(--color-error)); } .user-menu-logout:hover { background: rgba(239, 68, 68, 0.08); color: var(--color-danger, var(--color-error)); } /* Change Password Modal */ .change-password-modal { max-width: 400px; width: 90vw; } .change-password-modal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border-muted); } .change-password-modal .modal-header h3 { margin: 0; font-size: var(--font-size-lg); } .change-password-modal .modal-body { padding: 20px; } .password-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; text-align: center; } .password-success p { color: var(--color-success, var(--color-success)); font-weight: var(--font-weight-medium); } /* Upload sidebar drag-drop enhancements */ .upload-sidebar-dropzone.drag-over { border-color: var(--color-primary); background: rgba(59, 130, 246, 0.08); transform: scale(1.01); transition: all var(--transition-normal); } /* ============================================ Main Content Layout ============================================ */ .main-content { flex: 1; display: flex; flex-direction: column; padding: var(--spacing-lg); max-width: 1400px; margin: 0 auto; width: 100%; box-sizing: border-box; } .content-area { display: flex; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .content-area .dashboard-section { flex: 1; min-width: 0; grid-column: auto; } /* ============================================ UploadSidebar Component Styles ============================================ */ .upload-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--spacing-md); } .upload-sidebar-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-sm) 0; } .upload-sidebar-dropzone { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); overflow: hidden; } .upload-sidebar-dropzone .upload-container { padding: 0; } .upload-sidebar-dropzone .upload-zone { border-radius: var(--radius-lg); padding: 1.5rem 1rem; border: none; background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-primary-light) 100%); } .upload-sidebar-dropzone .upload-zone:hover { background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-info-bg) 100%); } .upload-sidebar-dropzone .upload-icon svg { width: 36px; height: 36px; } .upload-sidebar-dropzone .upload-text { font-size: var(--font-size-sm); } .upload-sidebar-dropzone .upload-subtext { font-size: var(--font-size-xs); } .upload-sidebar-dropzone .upload-formats { font-size: var(--font-size-xs); } /* Integrations Section */ .upload-sidebar-integrations { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: var(--spacing-md); } .integrations-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--spacing-sm) 0; } .integration-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); border-radius: var(--radius-md); margin-bottom: var(--spacing-xs); } .integration-item:last-child { margin-bottom: 0; } .integration-coming-soon { opacity: 0.6; cursor: not-allowed; } .integration-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--color-surface); border-radius: var(--radius-md); color: var(--color-text-muted); } .integration-info { display: flex; flex-direction: column; } .integration-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .integration-status { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Google Drive Integration Button */ button.integration-item.integration-google-drive { width: 100%; background: none; border: 1px solid transparent; cursor: pointer; text-align: left; transition: all var(--transition-fast); } button.integration-item.integration-google-drive:hover { background-color: var(--color-hover-overlay); border-color: var(--color-border); } button.integration-item.integration-google-drive:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 2px var(--color-accent-primary-light); } button.integration-item.integration-google-drive:disabled { opacity: 0.7; cursor: wait; } .integration-google-drive .integration-icon { color: var(--color-accent-primary); background-color: var(--color-accent-primary-light); } .integration-google-drive.integration-connected .integration-icon { color: var(--color-success); background-color: var(--color-success-bg); } .integration-google-drive .integration-name { color: var(--color-text-primary); } .integration-google-drive .integration-status.status-connected { color: var(--color-success); } .integration-badge { display: flex; align-items: center; justify-content: center; margin-left: auto; width: 20px; height: 20px; border-radius: var(--radius-full); background-color: var(--color-success); color: var(--color-text-inverse); } /* Drive Picker Modal Overlay */ .drive-picker-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal-backdrop); padding: var(--spacing-lg); } .drive-picker-modal { background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 600px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; z-index: var(--z-modal); overflow: hidden; } .drive-picker-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .drive-picker-modal-header h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .drive-picker-modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: none; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .drive-picker-modal-close:hover { background-color: var(--color-hover-overlay); color: var(--color-text-primary); } .drive-picker-modal-close:focus { outline: none; box-shadow: 0 0 0 2px var(--color-accent-primary-light); } .drive-picker-modal .drive-picker { border: none; border-radius: 0; flex: 1; overflow: auto; } /* ============================================ QuickStats Component Styles ============================================ */ .quick-stats { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: var(--spacing-4); flex: 1; overflow: visible; } .quick-stats-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-3) 0; } .quick-stats-grid { display: flex; flex-direction: column; gap: var(--spacing-2); } .quick-stats-loading, .quick-stats-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-xl); color: var(--color-text-muted); } .stat-card { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background-color: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-muted); transition: all var(--transition-fast); } .stat-card:hover { background-color: var(--color-surface-elevated); box-shadow: var(--shadow-sm); border-color: var(--color-border); } .stat-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border-radius: var(--radius-md); flex-shrink: 0; } .stat-icon-total { background-color: var(--color-info-bg); color: var(--color-info); } .stat-icon-pending { background-color: var(--color-warning-bg); color: var(--color-warning); } .stat-icon-risk { background-color: var(--color-error-bg); color: var(--color-error); } .stat-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .stat-value { font-size: 1.375rem; font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; flex-shrink: 0; } .stat-value-risk { color: var(--color-error); } .stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: normal; word-wrap: break-word; } /* ============================================ Bottom Cards Layout ============================================ */ .bottom-cards { display: flex; gap: var(--spacing-lg); } .bottom-cards .status-section { flex: 1; margin-bottom: 0; } .bottom-cards .status-section h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0; padding-bottom: 0; border-bottom: none; } .status-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-lg); color: var(--color-text-muted); } /* ============================================ Footer Adjustments for New Layout ============================================ */ .app-layout .footer { margin: var(--spacing-lg) 0 0 0; width: 100%; border-radius: 0; } /* ============================================ Responsive Adjustments for Dashboard Layout ============================================ */ @media (max-width: 1024px) { .content-area { flex-direction: column; } .upload-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; } .upload-sidebar-dropzone { flex: 1; min-width: 250px; } .upload-sidebar-integrations { flex: 1; min-width: 250px; } } @media (max-width: 768px) { .top-nav { padding: 0 var(--spacing-md); } .top-nav-logo { font-size: var(--font-size-xl); } .main-content { padding: var(--spacing-md); } .bottom-cards { flex-direction: column; } .stat-card { flex-direction: row; justify-content: flex-start; } .upload-sidebar { flex-direction: column; } .upload-sidebar-dropzone, .upload-sidebar-integrations { min-width: auto; } } @media (max-width: 480px) { .top-nav-prototype-label { display: none; } } /* ============================================ Clean Professional Theme (Option A) Styling ============================================ Design Characteristics: - Light-first, navy/white base, brass (#B8860B) accents - Playfair Display for headings (elegant, serif) - Generous whitespace (32px gaps, 24px padding) - 8px border radius for cards, 6px for buttons - Soft, subtle shadows - Apple meets legal - refined, premium, restrained ============================================ */ /* ---------------------------------------- Global Typography - Headings ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-text-primary); letter-spacing: var(--letter-spacing-tight); } h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } h4 { font-size: var(--font-size-lg); } h5 { font-size: var(--font-size-base); } h6 { font-size: var(--font-size-sm); } /* ---------------------------------------- Monospace Styling for Extracted Data ---------------------------------------- */ /* Contract terms, dates, values, and data */ .extraction-value, .contract-date, .obligation-deadline, .data-value, .term-value, .date-value, .amount-value, .extracted-text, code, .mono { font-family: var(--font-mono); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-normal); } /* Source citations in extractions */ .source-content { font-family: var(--font-mono); font-size: var(--font-size-sm); } /* Risk clause quotes - monospace for legal text */ .risk-clause blockquote, .risk-card .risk-clause blockquote { font-family: var(--font-mono); font-style: normal; font-size: var(--font-size-sm); background-color: var(--color-surface); border-left-color: var(--color-accent-secondary); color: var(--color-text-secondary); } /* ---------------------------------------- Brass Accent Color Usage ---------------------------------------- */ /* Primary buttons use brass accent */ .btn-primary { background: var(--color-accent-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-weight: var(--font-weight-semibold); transition: all var(--transition-fast); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); } .btn-primary:disabled { background: var(--color-text-muted); cursor: not-allowed; transform: none; } /* Secondary buttons with brass border on hover */ .btn-secondary { background: var(--color-surface-elevated); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .btn-secondary:hover { border-color: var(--color-accent-secondary); color: var(--color-accent-secondary); background: var(--color-surface-elevated); } /* Active tab indicators use brass */ .tab-btn.active { color: var(--color-accent-secondary); border-bottom: 3px solid var(--color-accent-secondary); background-color: var(--color-surface-elevated); } .tab-btn:hover:not(:disabled):not(.active) { color: var(--color-accent-secondary); background-color: var(--color-surface); } /* Key highlights and emphasis */ .highlight, .key-term, .important-value { color: var(--color-accent-secondary); font-weight: var(--font-weight-semibold); } /* Links with brass accent */ a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-secondary); } /* ---------------------------------------- Card Styling - Clean Professional ---------------------------------------- */ /* Base card styling */ .card, .upload-section, .dashboard-section, .status-section, .features-section, .quick-stats, .upload-sidebar-dropzone, .upload-sidebar-integrations, .risk-panel, .contract-detail, .signing-panel { background: var(--color-surface-elevated); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); padding: var(--spacing-lg); } /* Card hover effect */ .card:hover, .upload-section:hover, .dashboard-section:hover, .status-section:hover { box-shadow: var(--shadow-md); } /* Section titles in cards */ .upload-section h2, .dashboard-section h2, .status-section h2, .features-section h2, .quick-stats-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-accent-primary); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } /* ---------------------------------------- Table Styling - Clean Horizontal Lines ---------------------------------------- */ .contract-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .contract-table thead { background-color: var(--color-surface); } .contract-table th { text-align: left; padding: var(--spacing-md) var(--spacing-lg); font-family: var(--font-heading); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); border-bottom: 2px solid var(--color-border-strong); white-space: nowrap; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .contract-table td { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-border-muted); vertical-align: middle; color: var(--color-text-primary); } /* Table row hover with brass left-border */ .contract-row { cursor: pointer; transition: all var(--transition-fast); border-left: 3px solid transparent; } .contract-row:hover { background-color: var(--color-primary-light); border-left-color: var(--color-accent-secondary); } .contract-row:focus { outline: none; background-color: var(--color-primary-light); border-left-color: var(--color-accent-secondary); box-shadow: inset 0 0 0 1px var(--color-accent-secondary); } /* Filename styling in table */ .filename-text { color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .file-icon { color: var(--color-accent-primary); } /* ---------------------------------------- Risk Severity Colors - Clean Palette ---------------------------------------- */ /* Risk count badges */ .risk-count-critical { background-color: var(--color-risk-critical-bg); color: var(--color-risk-critical); } .risk-count-high { background-color: var(--color-risk-high-bg); color: var(--color-risk-high); } .risk-count-medium { background-color: var(--color-risk-medium-bg); color: var(--color-risk-medium); } .risk-count-low { background-color: var(--color-risk-low-bg); color: var(--color-risk-low); } /* Risk severity badges */ .risk-severity-badge.risk-severity-critical { background-color: var(--color-risk-critical-bg); color: var(--color-risk-critical); } .risk-severity-badge.risk-severity-high { background-color: var(--color-risk-high-bg); color: var(--color-risk-high); } .risk-severity-badge.risk-severity-medium { background-color: var(--color-risk-medium-bg); color: var(--color-risk-medium); } .risk-severity-badge.risk-severity-low { background-color: var(--color-risk-low-bg); color: var(--color-risk-low); } /* Risk item border colors */ .risk-item.risk-severity-critical { border-left-color: var(--color-risk-critical); } .risk-item.risk-severity-high { border-left-color: var(--color-risk-high); } .risk-item.risk-severity-medium { border-left-color: var(--color-risk-medium); } .risk-item.risk-severity-low { border-left-color: var(--color-risk-low); } /* Risk card severity borders */ .risk-card.severity-critical { border-left-color: var(--color-risk-critical); } .risk-card.severity-high { border-left-color: var(--color-risk-high); } .risk-card.severity-medium { border-left-color: var(--color-risk-medium); } .risk-card.severity-low { border-left-color: var(--color-risk-low); } /* Severity badges in cards */ .severity-badge.severity-critical { background-color: var(--color-risk-critical-bg); color: var(--color-risk-critical); } .severity-badge.severity-high { background-color: var(--color-risk-high-bg); color: var(--color-risk-high); } .severity-badge.severity-medium { background-color: var(--color-risk-medium-bg); color: var(--color-risk-medium); } .severity-badge.severity-low { background-color: var(--color-risk-low-bg); color: var(--color-risk-low); } /* ---------------------------------------- Additional Component Updates ---------------------------------------- */ /* Header styling */ .header, .top-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .header h1, .top-nav-logo { font-family: var(--font-heading); color: var(--color-text-primary); } .tagline { color: var(--color-text-secondary); } /* Upload zone styling */ .upload-zone { border: 2px dashed var(--color-border-strong); border-radius: var(--radius-xl); background-color: var(--color-surface); padding: var(--spacing-2xl) var(--spacing-xl); transition: all var(--transition-fast); } .upload-zone:hover { border-color: var(--color-accent-secondary); background-color: var(--color-surface-elevated); } .upload-zone.drag-over { border-color: var(--color-accent-secondary); background-color: rgba(184, 134, 11, 0.05); box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.1); } .upload-icon { color: var(--color-accent-secondary); } .upload-text { color: var(--color-text-primary); } .upload-subtext { color: var(--color-text-secondary); } .upload-formats { color: var(--color-text-muted); } /* Progress bar with brass accent */ .progress-bar { background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-secondary-hover)); } .upload-status { color: var(--color-accent-secondary); } /* Contract item styling */ .contract-item { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .contract-item:hover { border-color: var(--color-accent-secondary); box-shadow: var(--shadow-sm); } .contract-icon { color: var(--color-accent-primary); } .contract-name { color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .contract-size { color: var(--color-text-muted); font-family: var(--font-mono); } /* Status badges */ .status-badge { border-radius: var(--radius-full); padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .status-badge.status-completed, .status-badge.ok, .contract-status.status-success { background-color: var(--color-success-bg); color: var(--color-success-text); } .status-badge.status-processing, .contract-status.status-uploading { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .status-badge.status-pending { background-color: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .status-badge.status-error, .contract-status.status-error { background-color: var(--color-error-bg); color: var(--color-error-text); } /* Language badge */ .language-badge { background-color: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-sm); font-family: var(--font-mono); } /* OCR badge */ .ocr-badge { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-sm); font-family: var(--font-mono); } /* Loading states */ .loading-spinner, .spinner, .risk-loading-spinner { border-color: var(--color-border); border-top-color: var(--color-accent-secondary); } /* Error states */ .upload-error, .contract-list-error, .contract-detail-error, .risk-error { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error-text); } .error-dismiss { color: var(--color-error); } /* Empty states */ .no-contracts, .contract-list-empty, .extractions-empty, .tab-panel-empty { background-color: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-lg); } /* Risk panel header */ .risk-panel-header, .risk-summary { background-color: var(--color-surface); border-bottom-color: var(--color-border); } .risk-panel-header h3 { font-family: var(--font-heading); color: var(--color-text-primary); } /* Risk header hover */ .risk-header:hover { background-color: var(--color-surface); } .risk-header:focus { background-color: var(--color-surface); outline: 2px solid var(--color-accent-secondary); outline-offset: -2px; } .risk-type { color: var(--color-text-primary); } .risk-chevron { color: var(--color-text-muted); } /* Risk details */ .risk-details { background-color: var(--color-surface); border-top-color: var(--color-border); } .risk-explanation h4, .risk-clause h4 { color: var(--color-text-muted); font-family: var(--font-heading); } .risk-explanation p { color: var(--color-text-secondary); } /* Contract detail styling */ .contract-detail-header { background: var(--color-surface); border-bottom-color: var(--color-border); } .contract-detail-title h2 { font-family: var(--font-heading); color: var(--color-accent-primary); } .btn-back { background: var(--color-surface-elevated); border-color: var(--color-border); color: var(--color-text-secondary); border-radius: var(--radius-lg); } .btn-back:hover { background-color: var(--color-surface); border-color: var(--color-accent-secondary); color: var(--color-accent-secondary); } .date-info { color: var(--color-text-muted); font-family: var(--font-mono); } /* Tabs styling */ .contract-tabs { background-color: var(--color-surface); border-bottom-color: var(--color-border); } .tab-btn { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } /* Extraction styling */ .extraction-group { border-color: var(--color-border); border-radius: var(--radius-lg); } .extraction-group-title { background-color: var(--color-surface); border-bottom-color: var(--color-border); font-family: var(--font-heading); color: var(--color-text-primary); } .extraction-grid { background-color: var(--color-border-muted); } .extraction-item { background-color: var(--color-surface-elevated); } .extraction-label { color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .extraction-value.empty { color: var(--color-text-muted); } /* Confidence indicators */ .confidence-bar-container { background-color: var(--color-border); } .confidence-bar.confidence-high { background-color: var(--color-success); } .confidence-bar.confidence-medium { background-color: var(--color-warning); } .confidence-bar.confidence-low { background-color: var(--color-error); } .confidence-label.confidence-high { color: var(--color-success-text); } .confidence-label.confidence-medium { color: var(--color-warning-text); } .confidence-label.confidence-low { color: var(--color-error-text); } /* Source popover */ .source-toggle { background-color: var(--color-surface); color: var(--color-text-secondary); border-radius: var(--radius-sm); } .source-toggle:hover { background-color: var(--color-surface-elevated); color: var(--color-accent-secondary); } .source-popover { background-color: var(--color-accent-primary); color: var(--color-text-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .source-popover::after { border-top-color: var(--color-accent-primary); } /* Obligations styling */ .obligations-section { border-color: var(--color-border); border-radius: var(--radius-lg); } .obligations-section > .extraction-header { background-color: var(--color-surface); border-bottom-color: var(--color-border); } .obligation-item { border-bottom-color: var(--color-border); } .obligation-party { color: var(--color-accent-primary); } .obligation-text { color: var(--color-text-primary); } .obligation-deadline { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-sm); font-family: var(--font-mono); } /* Summary styling */ .summary-content { background-color: var(--color-surface); border-color: var(--color-border); border-radius: var(--radius-lg); } .summary-text { color: var(--color-text-primary); line-height: var(--line-height-relaxed); } /* Footer styling */ .footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); } /* Features list */ .features-list li { border-bottom-color: var(--color-border); color: var(--color-text-primary); } .features-list li::before { color: var(--color-accent-secondary); } /* Signing workflow styling */ .signing-header { background: var(--color-accent-primary); } .btn-send-signature { background: var(--color-accent-secondary); color: var(--color-text-inverse); } .btn-send-signature:hover:not(:disabled) { background: var(--color-accent-secondary-hover); } .signing-progress { background: var(--color-surface-elevated); border-color: var(--color-border); } .signing-progress h3 { font-family: var(--font-heading); color: var(--color-text-primary); } .signer-card { border-color: var(--color-border); background-color: var(--color-surface); } .signer-order { background-color: var(--color-accent-primary); } .signer-name { color: var(--color-text-primary); } .signer-email { color: var(--color-text-secondary); font-family: var(--font-mono); } .signer-role { color: var(--color-text-muted); } /* UAE Law citations */ .uae-law-citation { background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-surface) 100%); border-color: var(--color-info); border-left-color: var(--color-accent-secondary); } .uae-law-citation-header span { color: var(--color-accent-primary); font-family: var(--font-heading); } .citation-source { color: var(--color-accent-primary); font-family: var(--font-mono); } .citation-text { color: var(--color-text-secondary); } /* Retry button */ .retry-button { background-color: var(--color-accent-secondary); color: var(--color-text-inverse); border-radius: var(--radius-md); } .retry-button:hover { background-color: var(--color-accent-secondary-hover); } /* Risk action buttons */ .risk-action-btn { background-color: var(--color-surface-elevated); border-color: var(--color-border); color: var(--color-text-secondary); border-radius: var(--radius-sm); } .risk-action-btn:hover:not(:disabled) { background-color: var(--color-surface); border-color: var(--color-accent-secondary); color: var(--color-accent-secondary); } /* Selected contract info */ .selected-contract-info { background-color: rgba(184, 134, 11, 0.1); border-color: var(--color-accent-secondary); color: var(--color-text-primary); border-radius: var(--radius-md); } /* Alert messages */ .contract-detail-alert.error { background-color: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error-text); } /* ---------------------------------------- Dark Mode Adjustments for Clean Theme ---------------------------------------- */ html[data-theme="clean"][data-mode="dark"], html:not([data-theme])[data-mode="dark"] { /* Ensure card backgrounds are properly elevated in dark mode */ .card, .upload-section, .dashboard-section, .status-section, .features-section, .quick-stats, .upload-sidebar-dropzone, .upload-sidebar-integrations, .risk-panel, .contract-detail, .signing-panel { background: var(--color-surface); border-color: var(--color-border); } /* Brass accent adjustments for dark mode */ .btn-primary { background: var(--color-accent-primary); color: var(--color-text-inverse); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); } /* Table hover in dark mode */ .contract-row:hover { background-color: var(--color-surface-elevated); } /* Upload zone in dark mode */ .upload-zone { background-color: var(--color-surface); border-color: var(--color-border); } .upload-zone:hover, .upload-zone.drag-over { background-color: var(--color-surface-elevated); border-color: var(--color-accent-secondary); } /* Header gradient in dark mode */ .header, .top-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } /* Footer in dark mode */ .footer { background: var(--color-surface); } } /* ============================================ Theme: Modern Legal Tech (Terminal) Overrides ============================================ Bloomberg Terminal meets Legal - data-dense, sophisticated, powerful Design Characteristics: - Dark-first, near-black base (#09090B), cyan (#06B6D4) + gold (#EAB308) accents - Playfair Display for headings, more monospace throughout - Tighter spacing (24px gaps, 16px padding) - 4px border radius (sharper edges) - Minimal shadows, border-focused - Terminal-style status indicators (dot indicators) ============================================ */ /* === Terminal Theme: Override Border Radius & Spacing === */ html[data-theme="terminal"] { --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px; /* Tighter spacing for data-dense feel */ --spacing-lg: 20px; --spacing-xl: 28px; --spacing-2xl: 40px; /* Reduced shadows - border-focused */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3); } /* === Terminal Theme: Body & Base === */ html[data-theme="terminal"] body { font-family: var(--font-body); letter-spacing: 0.01em; } /* === Terminal Theme: TopNav === */ html[data-theme="terminal"] .top-nav { background: linear-gradient(180deg, #18181B 0%, #09090B 100%); border-bottom: 1px solid var(--color-border); box-shadow: none; } html[data-theme="terminal"] .top-nav-logo { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; } html[data-theme="terminal"] .top-nav-ai-badge { background: var(--color-accent-secondary); color: #09090B; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; } html[data-theme="terminal"] .top-nav-prototype-label { background-color: rgba(6, 182, 212, 0.15); border: 1px solid rgba(6, 182, 212, 0.3); color: var(--color-accent-primary); font-family: var(--font-mono); font-size: var(--font-size-xs); } html[data-theme="terminal"] .top-nav-theme-toggle { background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .top-nav-theme-toggle:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); } /* === Terminal Theme: Theme Switcher === */ html[data-theme="terminal"] .theme-switcher-label { color: var(--color-text-secondary); } html[data-theme="terminal"] .theme-switcher-buttons { background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .theme-switcher-btn { color: var(--color-text-secondary); } html[data-theme="terminal"] .theme-switcher-btn:hover { color: var(--color-accent-primary); background-color: rgba(0, 255, 136, 0.1); } html[data-theme="terminal"] .theme-switcher-btn.active { color: var(--color-accent-primary); background-color: rgba(0, 255, 136, 0.15); } html[data-theme="terminal"] .theme-switcher-btn:focus { box-shadow: inset 0 0 0 2px var(--color-accent-primary); } /* === Terminal Theme: Links === */ html[data-theme="terminal"] a { color: var(--color-accent-primary); text-decoration: none; transition: color var(--transition-fast); } html[data-theme="terminal"] a:hover { color: var(--color-accent-primary-hover); text-decoration: underline; } html[data-theme="terminal"] a:focus { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } /* === Terminal Theme: Cards & Sections === */ html[data-theme="terminal"] .upload-section, html[data-theme="terminal"] .dashboard-section, html[data-theme="terminal"] .status-section, html[data-theme="terminal"] .features-section, html[data-theme="terminal"] .quick-stats, html[data-theme="terminal"] .upload-sidebar-dropzone, html[data-theme="terminal"] .upload-sidebar-integrations { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } html[data-theme="terminal"] .upload-section:hover, html[data-theme="terminal"] .dashboard-section:hover, html[data-theme="terminal"] .status-section:hover, html[data-theme="terminal"] .features-section:hover { border-color: var(--color-border-strong); box-shadow: none; } /* === Terminal Theme: Section Titles === */ html[data-theme="terminal"] .upload-section h2, html[data-theme="terminal"] .dashboard-section h2, html[data-theme="terminal"] .status-section h2, html[data-theme="terminal"] .features-section h2, html[data-theme="terminal"] .quick-stats-title, html[data-theme="terminal"] .upload-sidebar-title { font-family: var(--font-heading); color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-sm); } /* === Terminal Theme: Upload Zone === */ html[data-theme="terminal"] .upload-zone { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); } html[data-theme="terminal"] .upload-zone:hover { border-color: var(--color-accent-primary); background: rgba(6, 182, 212, 0.05); } html[data-theme="terminal"] .upload-zone.drag-over { border-color: var(--color-accent-primary); background: rgba(6, 182, 212, 0.1); border-style: solid; } html[data-theme="terminal"] .upload-sidebar-dropzone .upload-zone { background: var(--color-surface); border: 1px dashed var(--color-border-strong); } html[data-theme="terminal"] .upload-sidebar-dropzone .upload-zone:hover { background: rgba(6, 182, 212, 0.05); border-color: var(--color-accent-primary); } html[data-theme="terminal"] .upload-icon { color: var(--color-accent-primary); } html[data-theme="terminal"] .upload-text { color: var(--color-text-primary); font-family: var(--font-mono); font-size: var(--font-size-sm); } html[data-theme="terminal"] .upload-subtext, html[data-theme="terminal"] .upload-formats { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); } /* === Terminal Theme: Buttons === */ html[data-theme="terminal"] .btn { border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; box-shadow: none; transition: all var(--transition-fast); } html[data-theme="terminal"] .btn-primary { background: var(--color-accent-primary); color: #09090B; border: none; } html[data-theme="terminal"] .btn-primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); transform: none; box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.3); } html[data-theme="terminal"] .btn-secondary { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); } html[data-theme="terminal"] .btn-secondary:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); background: rgba(6, 182, 212, 0.05); } /* === Terminal Theme: Status Badges with Dot Indicators === */ html[data-theme="terminal"] .status-badge { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; } /* Terminal status indicators - prepend dots */ html[data-theme="terminal"] .status-badge::before { content: "●"; margin-right: 0.4em; font-size: 0.7em; } html[data-theme="terminal"] .status-badge.status-pending::before { content: "○"; color: var(--color-text-muted); } html[data-theme="terminal"] .status-badge.status-processing::before, html[data-theme="terminal"] .status-badge.status-uploading::before { color: var(--color-accent-secondary); animation: terminal-blink 1s infinite; } html[data-theme="terminal"] .status-badge.status-completed::before, html[data-theme="terminal"] .status-badge.status-success::before { color: var(--color-success); } html[data-theme="terminal"] .status-badge.status-error::before { color: var(--color-error); } @keyframes terminal-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.3; } } /* Terminal theme status badge colors */ html[data-theme="terminal"] .status-badge.status-pending { background-color: var(--color-surface-elevated); color: var(--color-text-muted); border: 1px solid var(--color-border); } html[data-theme="terminal"] .status-badge.status-processing { background-color: rgba(234, 179, 8, 0.15); color: var(--color-accent-secondary); border: 1px solid rgba(234, 179, 8, 0.3); } html[data-theme="terminal"] .status-badge.status-completed { background-color: rgba(34, 197, 94, 0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.3); } html[data-theme="terminal"] .status-badge.status-error { background-color: rgba(239, 68, 68, 0.15); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); } /* === Terminal Theme: Contract Table === */ html[data-theme="terminal"] .contract-table { font-family: var(--font-mono); font-size: var(--font-size-sm); } html[data-theme="terminal"] .contract-table thead { background-color: var(--color-surface); } html[data-theme="terminal"] .contract-table th { color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); font-weight: 500; text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.05em; } html[data-theme="terminal"] .contract-table td { border-bottom: 1px solid var(--color-border-muted); } html[data-theme="terminal"] .contract-row:hover { background-color: rgba(6, 182, 212, 0.05); } html[data-theme="terminal"] .contract-row:focus { background-color: rgba(6, 182, 212, 0.08); box-shadow: inset 0 0 0 1px var(--color-accent-primary); } html[data-theme="terminal"] .filename-text { color: var(--color-text-primary); font-family: var(--font-mono); } /* === Terminal Theme: Signing Badges === */ html[data-theme="terminal"] .signing-badge { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; } html[data-theme="terminal"] .signing-badge.signing-draft { background-color: var(--color-surface-elevated); color: var(--color-text-muted); border: 1px solid var(--color-border); } html[data-theme="terminal"] .signing-badge.signing-sent { background-color: rgba(59, 130, 246, 0.15); color: var(--color-primary); border: 1px solid rgba(59, 130, 246, 0.3); } html[data-theme="terminal"] .signing-badge.signing-in-progress { background-color: rgba(234, 179, 8, 0.15); color: var(--color-accent-secondary); border: 1px solid rgba(234, 179, 8, 0.3); } html[data-theme="terminal"] .signing-badge.signing-completed { background-color: rgba(34, 197, 94, 0.15); color: var(--color-success); border: 1px solid rgba(34, 197, 94, 0.3); } html[data-theme="terminal"] .signing-badge.signing-declined, html[data-theme="terminal"] .signing-badge.signing-voided { background-color: rgba(239, 68, 68, 0.15); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.3); } html[data-theme="terminal"] .file-icon { color: var(--color-accent-primary); } html[data-theme="terminal"] .contract-date { color: var(--color-text-muted); font-family: var(--font-mono); } html[data-theme="terminal"] .language-badge { background-color: var(--color-surface-elevated); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); } html[data-theme="terminal"] .ocr-badge { background-color: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); font-family: var(--font-mono); } /* === Terminal Theme: Risk Panel === */ html[data-theme="terminal"] .risk-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } html[data-theme="terminal"] .risk-panel-header { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme="terminal"] .risk-panel-header h3 { color: var(--color-text-primary); font-family: var(--font-heading); } html[data-theme="terminal"] .risk-summary { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme="terminal"] .risk-count { font-family: var(--font-mono); border-radius: var(--radius-sm); } html[data-theme="terminal"] .risk-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .risk-item:hover { box-shadow: none; border-color: var(--color-border-strong); } html[data-theme="terminal"] .risk-header:hover { background-color: rgba(6, 182, 212, 0.03); } html[data-theme="terminal"] .risk-severity-badge { font-family: var(--font-mono); border-radius: var(--radius-sm); font-size: 0.65rem; letter-spacing: 0.08em; } html[data-theme="terminal"] .risk-type { color: var(--color-text-primary); font-family: var(--font-body); } html[data-theme="terminal"] .risk-details { background-color: var(--color-surface); border-top: 1px solid var(--color-border); } html[data-theme="terminal"] .risk-explanation h4, html[data-theme="terminal"] .risk-clause h4 { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; } html[data-theme="terminal"] .risk-clause blockquote { background-color: var(--color-surface-elevated); border-left: 2px solid var(--color-accent-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--font-size-sm); font-style: normal; } /* === Terminal Theme: Risk Severity Colors === */ html[data-theme="terminal"] .risk-severity-badge.risk-severity-critical, html[data-theme="terminal"] .risk-count-critical { background-color: rgba(239, 68, 68, 0.2); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.4); } html[data-theme="terminal"] .risk-severity-badge.risk-severity-high, html[data-theme="terminal"] .risk-count-high { background-color: rgba(249, 115, 22, 0.2); color: var(--color-warning); border: 1px solid rgba(249, 115, 22, 0.4); } html[data-theme="terminal"] .risk-severity-badge.risk-severity-medium, html[data-theme="terminal"] .risk-count-medium { background-color: rgba(234, 179, 8, 0.2); color: var(--color-accent-secondary); border: 1px solid rgba(234, 179, 8, 0.4); } html[data-theme="terminal"] .risk-severity-badge.risk-severity-low, html[data-theme="terminal"] .risk-count-low { background-color: rgba(6, 182, 212, 0.2); color: var(--color-accent-primary); border: 1px solid rgba(6, 182, 212, 0.4); } /* === Terminal Theme: Risk Item Border Colors === */ html[data-theme="terminal"] .risk-item.risk-severity-critical { border-left: 3px solid var(--color-error); } html[data-theme="terminal"] .risk-item.risk-severity-high { border-left: 3px solid var(--color-warning); } html[data-theme="terminal"] .risk-item.risk-severity-medium { border-left: 3px solid var(--color-accent-secondary); } html[data-theme="terminal"] .risk-item.risk-severity-low { border-left: 3px solid var(--color-accent-primary); } /* === Terminal Theme: Contract Detail === */ html[data-theme="terminal"] .contract-detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: none; } html[data-theme="terminal"] .contract-detail-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme="terminal"] .contract-detail-title h2 { font-family: var(--font-heading); color: var(--color-text-primary); } html[data-theme="terminal"] .btn-back { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); } html[data-theme="terminal"] .btn-back:hover { background-color: rgba(6, 182, 212, 0.1); border-color: var(--color-accent-primary); color: var(--color-accent-primary); } html[data-theme="terminal"] .date-info { font-family: var(--font-mono); color: var(--color-text-muted); font-size: var(--font-size-xs); } /* === Terminal Theme: Tabs === */ html[data-theme="terminal"] .contract-tabs { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 var(--spacing-md); } html[data-theme="terminal"] .tab-btn { font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 500; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-right: var(--spacing-xs); } html[data-theme="terminal"] .tab-btn:hover:not(:disabled) { background-color: transparent; color: var(--color-accent-primary); } html[data-theme="terminal"] .tab-btn.active { background-color: transparent; color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); box-shadow: none; } html[data-theme="terminal"] .tab-btn:disabled { color: var(--color-text-muted); opacity: 0.5; } /* === Terminal Theme: Extractions View === */ html[data-theme="terminal"] .extraction-group { border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .extraction-group-title { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } html[data-theme="terminal"] .extraction-grid { background-color: var(--color-border); gap: 1px; } html[data-theme="terminal"] .extraction-item { background-color: var(--color-surface); } html[data-theme="terminal"] .extraction-label { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.05em; } html[data-theme="terminal"] .extraction-value { color: var(--color-text-primary); font-family: var(--font-mono); } html[data-theme="terminal"] .extraction-value.empty { color: var(--color-text-muted); } /* === Terminal Theme: Confidence Indicator === */ html[data-theme="terminal"] .confidence-bar-container { background-color: var(--color-surface-elevated); border-radius: var(--radius-sm); height: 4px; } html[data-theme="terminal"] .confidence-bar { border-radius: var(--radius-sm); } html[data-theme="terminal"] .confidence-bar.confidence-high { background-color: var(--color-success); } html[data-theme="terminal"] .confidence-bar.confidence-medium { background-color: var(--color-accent-secondary); } html[data-theme="terminal"] .confidence-bar.confidence-low { background-color: var(--color-error); } html[data-theme="terminal"] .confidence-label { font-family: var(--font-mono); font-size: var(--font-size-xs); } /* === Terminal Theme: Source Toggle === */ html[data-theme="terminal"] .source-toggle { background-color: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); color: var(--color-text-muted); } html[data-theme="terminal"] .source-toggle:hover { background-color: var(--color-surface-elevated); border-color: var(--color-accent-primary); color: var(--color-accent-primary); } html[data-theme="terminal"] .source-popover { background-color: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); } html[data-theme="terminal"] .source-popover::after { border-top-color: var(--color-surface-elevated); } /* === Terminal Theme: Stats Cards === */ html[data-theme="terminal"] .stat-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .stat-card:hover { background-color: var(--color-surface); border-color: var(--color-border-strong); box-shadow: none; } html[data-theme="terminal"] .stat-icon { border-radius: var(--radius-sm); } html[data-theme="terminal"] .stat-value { font-family: var(--font-mono); font-weight: 600; } html[data-theme="terminal"] .stat-label { font-family: var(--font-mono); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } /* === Terminal Theme: Integrations === */ html[data-theme="terminal"] .integrations-title { font-family: var(--font-mono); letter-spacing: 0.08em; } html[data-theme="terminal"] .integration-item { border-radius: var(--radius-sm); } html[data-theme="terminal"] .integration-icon { border-radius: var(--radius-sm); border: 1px solid var(--color-border); } html[data-theme="terminal"] .integration-name { font-family: var(--font-mono); } html[data-theme="terminal"] .integration-status { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } /* === Terminal Theme: Loading States === */ html[data-theme="terminal"] .loading-spinner, html[data-theme="terminal"] .spinner, html[data-theme="terminal"] .risk-loading-spinner { border-color: var(--color-border); border-top-color: var(--color-accent-primary); } /* === Terminal Theme: Empty States === */ html[data-theme="terminal"] .contract-list-empty, html[data-theme="terminal"] .no-contracts, html[data-theme="terminal"] .risk-empty, html[data-theme="terminal"] .tab-panel-empty, html[data-theme="terminal"] .extractions-empty { background-color: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); } /* Subtle scan-line texture for empty states */ html[data-theme="terminal"] .contract-list-empty, html[data-theme="terminal"] .tab-panel-empty, html[data-theme="terminal"] .extractions-empty { background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(6, 182, 212, 0.02) 2px, rgba(6, 182, 212, 0.02) 4px ); } /* === Terminal Theme: Error States === */ html[data-theme="terminal"] .upload-error, html[data-theme="terminal"] .contract-list-error, html[data-theme="terminal"] .risk-error, html[data-theme="terminal"] .contract-detail-error { background-color: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-sm); color: var(--color-error); } html[data-theme="terminal"] .retry-button { background-color: var(--color-accent-primary); color: #09090B; border-radius: var(--radius-sm); font-family: var(--font-mono); } html[data-theme="terminal"] .retry-button:hover { background-color: var(--color-accent-primary-hover); } /* === Terminal Theme: Progress Bar === */ html[data-theme="terminal"] .progress-bar-container { background-color: var(--color-surface-elevated); border-radius: var(--radius-sm); height: 6px; } html[data-theme="terminal"] .progress-bar { background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-primary-hover)); border-radius: var(--radius-sm); } /* === Terminal Theme: DocuSign/Signing Workflow === */ html[data-theme="terminal"] .signing-header { background: linear-gradient(180deg, var(--color-surface-elevated) 0%, var(--color-surface) 100%); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .signing-status-badge { font-family: var(--font-mono); border-radius: var(--radius-sm); font-size: var(--font-size-xs); letter-spacing: 0.05em; } html[data-theme="terminal"] .btn-send-signature { background: var(--color-accent-secondary); color: #09090B; border-radius: var(--radius-sm); font-family: var(--font-mono); box-shadow: none; } html[data-theme="terminal"] .btn-send-signature:hover:not(:disabled) { background: var(--color-accent-secondary-hover); transform: none; box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.3); } html[data-theme="terminal"] .signing-progress { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .signer-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); } html[data-theme="terminal"] .signer-card.signer-status-signed { background-color: rgba(34, 197, 94, 0.05); border-color: rgba(34, 197, 94, 0.3); } html[data-theme="terminal"] .signer-order { background-color: var(--color-accent-primary); border-radius: var(--radius-sm); font-family: var(--font-mono); } html[data-theme="terminal"] .signer-name { font-family: var(--font-mono); color: var(--color-text-primary); } html[data-theme="terminal"] .signer-email { font-family: var(--font-mono); color: var(--color-text-muted); } html[data-theme="terminal"] .signer-badge { font-family: var(--font-mono); border-radius: var(--radius-sm); } html[data-theme="terminal"] .signing-complete-banner { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: var(--radius-sm); } /* === Terminal Theme: UAE Law Citations === */ html[data-theme="terminal"] .uae-law-citation { background: rgba(6, 182, 212, 0.05); border: 1px solid rgba(6, 182, 212, 0.2); border-left: 3px solid var(--color-accent-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } html[data-theme="terminal"] .uae-law-citation-header span { font-family: var(--font-mono); color: var(--color-accent-primary); } html[data-theme="terminal"] .citation-source { font-family: var(--font-mono); color: var(--color-accent-primary); } html[data-theme="terminal"] .citation-text { color: var(--color-text-secondary); } html[data-theme="terminal"] .citation-recommendation { background-color: rgba(34, 197, 94, 0.1); border-radius: var(--radius-sm); } /* === Terminal Theme: Risk Cards (in Contract Detail) === */ html[data-theme="terminal"] .risk-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: none; } html[data-theme="terminal"] .risk-card:hover { transform: none; border-color: var(--color-border-strong); box-shadow: none; } html[data-theme="terminal"] .risk-card.severity-low { border-left-color: var(--color-accent-primary); } html[data-theme="terminal"] .risk-card.severity-medium { border-left-color: var(--color-accent-secondary); } html[data-theme="terminal"] .risk-card.severity-high { border-left-color: var(--color-warning); } html[data-theme="terminal"] .risk-card.severity-critical { border-left-color: var(--color-error); } html[data-theme="terminal"] .risk-card .risk-header { background-color: var(--color-surface); border-bottom: 1px solid var(--color-border); } html[data-theme="terminal"] .severity-badge { font-family: var(--font-mono); border-radius: var(--radius-sm); font-size: var(--font-size-xs); } html[data-theme="terminal"] .risk-card .risk-clause blockquote { background-color: var(--color-surface-elevated); border-left: 2px solid var(--color-border-strong); font-family: var(--font-mono); font-style: normal; } /* === Terminal Theme: Summary View === */ html[data-theme="terminal"] .summary-content { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } html[data-theme="terminal"] .summary-text { color: var(--color-text-secondary); font-family: var(--font-body); line-height: 1.8; } /* === Terminal Theme: Footer === */ html[data-theme="terminal"] .footer { background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-sm); } /* === Terminal Theme: Header (Legacy Support) === */ html[data-theme="terminal"] .header { background: linear-gradient(180deg, #18181B 0%, #09090B 100%); border-radius: 0; border-bottom: 1px solid var(--color-border); } html[data-theme="terminal"] .header h1 { font-family: var(--font-heading); color: var(--color-text-primary); } html[data-theme="terminal"] .tagline { color: var(--color-text-secondary); font-family: var(--font-mono); } /* === Terminal Theme Light Mode Adjustments === */ html[data-theme="terminal"][data-mode="light"] .top-nav { background: linear-gradient(180deg, #27272A 0%, #18181B 100%); } html[data-theme="terminal"][data-mode="light"] .header { background: linear-gradient(180deg, #27272A 0%, #18181B 100%); } html[data-theme="terminal"][data-mode="light"] .upload-zone { background: var(--color-surface); } html[data-theme="terminal"][data-mode="light"] .upload-zone:hover { background: rgba(8, 145, 178, 0.05); } html[data-theme="terminal"][data-mode="light"] .contract-row:hover { background-color: rgba(8, 145, 178, 0.05); } html[data-theme="terminal"][data-mode="light"] .tab-btn:hover:not(:disabled), html[data-theme="terminal"][data-mode="light"] .tab-btn.active { color: var(--color-accent-primary); } html[data-theme="terminal"][data-mode="light"] .btn-primary { background: var(--color-accent-primary); } html[data-theme="terminal"][data-mode="light"] .btn-primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); } /* Light mode severity badges */ html[data-theme="terminal"][data-mode="light"] .risk-severity-badge.risk-severity-critical, html[data-theme="terminal"][data-mode="light"] .risk-count-critical { background-color: rgba(220, 38, 38, 0.1); color: var(--color-error-text); border: 1px solid rgba(220, 38, 38, 0.3); } html[data-theme="terminal"][data-mode="light"] .risk-severity-badge.risk-severity-high, html[data-theme="terminal"][data-mode="light"] .risk-count-high { background-color: rgba(234, 88, 12, 0.1); color: var(--color-error); border: 1px solid rgba(234, 88, 12, 0.3); } html[data-theme="terminal"][data-mode="light"] .risk-severity-badge.risk-severity-medium, html[data-theme="terminal"][data-mode="light"] .risk-count-medium { background-color: rgba(202, 138, 4, 0.1); color: var(--color-warning); border: 1px solid rgba(202, 138, 4, 0.3); } html[data-theme="terminal"][data-mode="light"] .risk-severity-badge.risk-severity-low, html[data-theme="terminal"][data-mode="light"] .risk-count-low { background-color: rgba(8, 145, 178, 0.1); color: var(--color-info); border: 1px solid rgba(8, 145, 178, 0.3); } /* Light mode status badges */ html[data-theme="terminal"][data-mode="light"] .status-badge.status-processing { background-color: rgba(202, 138, 4, 0.1); color: var(--color-warning); border: 1px solid rgba(202, 138, 4, 0.3); } html[data-theme="terminal"][data-mode="light"] .status-badge.status-completed { background-color: rgba(22, 163, 74, 0.1); color: var(--color-success-text); border: 1px solid rgba(22, 163, 74, 0.3); } html[data-theme="terminal"][data-mode="light"] .status-badge.status-error { background-color: rgba(220, 38, 38, 0.1); color: var(--color-error-text); border: 1px solid rgba(220, 38, 38, 0.3); } /* ============================================ Google Drive Picker Component ============================================ */ .drive-picker { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); min-height: 300px; display: flex; flex-direction: column; } /* Loading State */ .drive-picker-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-2xl); color: var(--color-text-secondary); } /* Connect State */ .drive-picker-connect { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-md); padding: var(--spacing-2xl); text-align: center; } .drive-picker-connect svg { width: 48px; height: 48px; color: var(--color-accent-primary); } .drive-picker-connect h3 { margin: 0; font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .drive-picker-connect p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); } .drive-connect-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.375rem; background-color: var(--color-accent-primary); color: var(--color-text-inverse); border: 1.5px solid var(--color-accent-primary); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .drive-connect-btn:hover { background-color: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } .drive-connect-btn svg { width: 18px; height: 18px; } /* Header */ .drive-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .drive-picker-title { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .drive-picker-title svg { color: var(--color-accent-primary); } .drive-disconnect-btn { padding: 0.4375rem 0.875rem; background: none; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .drive-disconnect-btn:hover { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-bg); } /* Breadcrumb Navigation */ .drive-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); } .drive-breadcrumb-item { display: flex; align-items: center; gap: var(--spacing-xs); } .drive-breadcrumb-separator { color: var(--color-text-muted); } .drive-breadcrumb-link { padding: var(--spacing-xs) var(--spacing-sm); background: none; border: none; border-radius: var(--radius-sm); color: var(--color-accent-primary); cursor: pointer; transition: background-color var(--transition-fast); } .drive-breadcrumb-link:hover:not(:disabled) { background-color: var(--color-hover-overlay); } .drive-breadcrumb-link.active { color: var(--color-text-primary); cursor: default; } .drive-breadcrumb-link:disabled { cursor: default; } /* Error Display */ .drive-picker-error { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-md); background-color: var(--color-error-bg); color: var(--color-error-text); border-radius: var(--radius-md); font-size: var(--font-size-sm); } .drive-picker-error svg { flex-shrink: 0; } .drive-picker-error span { flex: 1; } .drive-error-dismiss { display: flex; align-items: center; justify-content: center; padding: var(--spacing-xs); background: none; border: none; color: var(--color-error-text); cursor: pointer; opacity: 0.7; transition: opacity var(--transition-fast); } .drive-error-dismiss:hover { opacity: 1; } /* File List Container */ .drive-file-list-container { flex: 1; min-height: 200px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg); } /* Empty State */ .drive-picker-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-2xl); color: var(--color-text-muted); } .drive-picker-empty svg { width: 32px; height: 32px; opacity: 0.5; } /* File List Table */ .drive-file-list { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .drive-file-list thead { position: sticky; top: 0; background-color: var(--color-surface); z-index: 1; } .drive-file-list th { padding: var(--spacing-sm) var(--spacing-md); text-align: left; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border); } .drive-file-list th:last-child { text-align: right; } /* File Item Rows */ .drive-file-item { cursor: pointer; transition: background-color var(--transition-fast); } .drive-file-item:hover { background-color: var(--color-hover-overlay); } .drive-file-item:focus { outline: none; background-color: var(--color-hover-overlay); } .drive-file-item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; } .drive-file-item.selected { background-color: var(--color-info-bg); } .drive-file-item.selected:hover { background-color: var(--color-info-bg); } .drive-file-item.disabled { opacity: 0.5; cursor: not-allowed; } .drive-file-item.folder { cursor: pointer; } .drive-file-item td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border-muted); } /* File Name Cell */ .drive-file-name { max-width: 0; width: 60%; } .drive-file-name-content { display: flex; align-items: center; gap: var(--spacing-sm); } .drive-file-icon { flex-shrink: 0; color: var(--color-text-secondary); } .drive-file-icon.folder-icon { color: var(--color-warning); } .drive-file-icon.pdf-icon { color: var(--color-error); } .drive-file-icon.docx-icon { color: var(--color-info); } .drive-file-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-primary); } /* Modified Date Cell */ .drive-file-modified { color: var(--color-text-secondary); white-space: nowrap; } /* Size Cell */ .drive-file-size { text-align: right; color: var(--color-text-secondary); white-space: nowrap; } /* Actions */ .drive-picker-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .drive-import-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.375rem; background-color: var(--color-accent-primary); color: var(--color-text-inverse); border: 1.5px solid var(--color-accent-primary); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .drive-import-btn:hover:not(:disabled) { background-color: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } .drive-import-btn:disabled { opacity: 0.5; cursor: not-allowed; } .drive-import-btn .loading-spinner { width: 16px; height: 16px; border-width: 2px; } .drive-import-hint { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Dark mode adjustments for Terminal theme */ html[data-theme="terminal"] .drive-picker { background-color: var(--color-surface); } html[data-theme="terminal"] .drive-file-list-container { background-color: var(--color-bg); } html[data-theme="terminal"] .drive-file-item.selected { background-color: rgba(8, 145, 178, 0.15); } html[data-theme="terminal"] .drive-file-item.selected:hover { background-color: rgba(8, 145, 178, 0.2); } /* Light mode adjustments for Terminal theme */ html[data-theme="terminal"][data-mode="light"] .drive-file-item.selected { background-color: rgba(8, 145, 178, 0.1); } html[data-theme="terminal"][data-mode="light"] .drive-file-item.selected:hover { background-color: rgba(8, 145, 178, 0.15); } /* ============================================ Drafting Workspace Styles ============================================ A comprehensive redesign following frontend-design principles: - Distinctive typography (DM Sans for body, Playfair Display for headings) - Bold color choices with proper accent hierarchy - Clean table/grid alignment with consistent spacing - Modern aesthetic with subtle depth and motion ============================================ */ /* Main Workspace Container */ .drafting-workspace { display: flex; flex-direction: column; gap: var(--spacing-lg); width: 100%; min-height: calc(100vh - 200px); animation: fadeIn 0.3s ease-out; } .drafting-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--spacing-md); border-bottom: 2px solid var(--color-border); } .drafting-header h2 { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; letter-spacing: -0.02em; } /* Back navigation button - overrides the broken .btn-back icon-only style */ .btn-back-nav { width: auto; height: auto; white-space: nowrap; padding: 0.5rem 1rem; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); gap: 0.375rem; } .drafting-content { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-xl); flex: 1; align-items: start; } /* Error Message */ .drafting-workspace .error-message { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) var(--spacing-lg); background-color: var(--color-error-bg); color: var(--color-error-text); border-radius: var(--radius-lg); border-left: 4px solid var(--color-error); font-size: var(--font-size-sm); } .drafting-workspace .error-message button { background: none; border: none; color: var(--color-error-text); font-size: var(--font-size-lg); cursor: pointer; padding: 0; line-height: 1; opacity: 0.7; transition: opacity var(--transition-fast); } .drafting-workspace .error-message button:hover { opacity: 1; } /* ---------------------------------------- Drafts Sidebar ---------------------------------------- */ .drafts-sidebar { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--spacing-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); position: sticky; top: var(--spacing-lg); } .drafts-sidebar h3 { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0; } .btn-new-draft { width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-lg); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .no-drafts { color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-lg); } .drafts-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); max-height: 400px; overflow-y: auto; } .draft-item { position: relative; display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-md); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid transparent; cursor: pointer; transition: all var(--transition-fast); } .draft-item:hover { background: var(--color-surface-elevated); border-color: var(--color-border); } .draft-item.active { background: var(--color-accent-primary); border-color: var(--color-accent-primary); } .draft-item.active .draft-title, .draft-item.active .draft-date { color: var(--color-text-inverse); } .draft-item.active .status-badge { background: rgba(255, 255, 255, 0.2); color: var(--color-text-inverse); } .draft-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 24px; } .draft-meta { display: flex; align-items: center; gap: var(--spacing-sm); } .draft-date { font-size: var(--font-size-xs); color: var(--color-text-muted); } .delete-draft { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); width: 24px; height: 24px; padding: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--font-size-xs); cursor: pointer; opacity: 0; transition: all var(--transition-fast); } .draft-item:hover .delete-draft { opacity: 1; } .delete-draft:hover { background: var(--color-error-bg); color: var(--color-error); } /* ---------------------------------------- Main Content Area ---------------------------------------- */ .drafting-main { background: var(--color-surface); border-radius: var(--radius-xl); padding: var(--spacing-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); min-height: 500px; } /* ---------------------------------------- Template Selector ---------------------------------------- */ .template-selector { animation: fadeIn 0.2s ease-out; } .template-selector h3 { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-xs) 0; } .template-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-base); margin: 0 0 var(--spacing-lg) 0; } .template-filters { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); } .template-search { flex: 1; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-primary); transition: all var(--transition-fast); } .template-search:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .template-search::placeholder { color: var(--color-text-muted); } .template-category-filter { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-primary); cursor: pointer; min-width: 160px; transition: all var(--transition-fast); } .template-category-filter:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* Template Grid - Properly Aligned */ .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-lg); align-items: stretch; } .template-card { display: flex; flex-direction: column; padding: var(--spacing-lg); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); } .template-card:hover { border-color: var(--color-accent-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .template-card.custom-template { border-style: dashed; border-width: 2px; } .template-card.custom-template:hover { background: var(--color-surface-elevated); } .template-icon { font-size: 2rem; margin-bottom: var(--spacing-md); line-height: 1; } .template-card h4 { font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-xs) 0; } .template-card p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; flex: 1; line-height: var(--line-height-relaxed); } .template-meta { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-muted); } .jurisdiction-badge, .language-badge { padding: 2px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; } .jurisdiction-badge { background: var(--color-info-bg); color: var(--color-info-text); } .language-badge { background: var(--color-surface-elevated); color: var(--color-text-secondary); } /* ---------------------------------------- Variable Form ---------------------------------------- */ .variable-form { animation: fadeIn 0.2s ease-out; } .variable-form .btn-back, .variable-form .btn-back-nav { margin-bottom: var(--spacing-lg); } .variable-form h3 { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: var(--spacing-xl) 0 var(--spacing-lg) 0; } .variable-form .form-group { margin-bottom: var(--spacing-lg); } .variable-form label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .variable-form input[type="text"] { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-base); font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-primary); transition: all var(--transition-fast); } .variable-form input[type="text"]:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .variable-form input[type="text"]::placeholder { color: var(--color-text-muted); } .variables-preview { background: var(--color-surface-elevated); border-radius: var(--radius-lg); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .variables-preview h4 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-sm) 0; } .variables-preview .help-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0 0 var(--spacing-md) 0; } .variable-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .variable-list li { font-size: var(--font-size-sm); color: var(--color-text-primary); padding: var(--spacing-xs) 0; } .variable-list li strong { font-weight: var(--font-weight-medium); } .variable-list li .help-text { color: var(--color-text-muted); font-size: var(--font-size-xs); } .more-variables { color: var(--color-text-muted); font-style: italic; } .no-variables { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); } .form-actions { display: flex; gap: var(--spacing-md); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); } .btn-create-draft { padding: 0.75rem 2rem; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); } /* ---------------------------------------- Draft Editor ---------------------------------------- */ .draft-editor { animation: fadeIn 0.2s ease-out; } .editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .editor-header h3 { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-xs) 0; } .draft-info { display: flex; align-items: center; gap: var(--spacing-md); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .editor-actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; } .btn-accent { background: var(--color-accent-secondary); color: var(--color-text-inverse); border: 1.5px solid var(--color-accent-secondary); padding: 0.625rem 1.375rem; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-accent:hover { background: var(--color-accent-secondary-hover); border-color: var(--color-accent-secondary-hover); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } /* Editor Tabs */ .editor-tabs { display: flex; gap: 0; margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); } .editor-tabs .tab { padding: var(--spacing-sm) var(--spacing-lg); background: none; border: none; border-bottom: 2px solid transparent; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .editor-tabs .tab:hover { color: var(--color-text-primary); } .editor-tabs .tab.active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); } /* Variables Editor - Proper Table Alignment */ .variables-editor { animation: fadeIn 0.15s ease-out; } .variable-fields { display: grid; gap: var(--spacing-lg); } .variable-field { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xs); } .variable-field label { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .ai-badge { display: inline-flex; align-items: center; padding: 2px 6px; background: linear-gradient(135deg, var(--color-accent-secondary) 0%, var(--color-accent-secondary-hover) 100%); color: var(--color-text-inverse); font-size: 10px; font-weight: var(--font-weight-bold); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; } .ai-error-message { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; margin: 0 16px 12px; background-color: var(--color-error-light); color: var(--color-danger-hover); border: 1px solid var(--color-error-bg); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; } .ai-error-message button { background: none; border: none; color: var(--color-danger-hover); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; } .variable-field input, .variable-field textarea, .variable-field select { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-base); font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-primary); transition: all var(--transition-fast); } .variable-field input:focus, .variable-field textarea:focus, .variable-field select:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .variable-field input::placeholder, .variable-field textarea::placeholder { color: var(--color-text-muted); } .variable-field textarea { resize: vertical; min-height: 100px; } .field-help { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } /* Content Preview */ .content-preview { animation: fadeIn 0.15s ease-out; } .unfilled-warning { padding: var(--spacing-md); background: var(--color-warning-bg); color: var(--color-warning-text); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--spacing-lg); } .preview-toolbar { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } .rendered-content { padding: var(--spacing-lg); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-primary); white-space: pre-wrap; word-wrap: break-word; } .content-editor { width: 100%; min-height: 400px; padding: var(--spacing-lg); background: var(--color-bg); border: 2px solid var(--color-accent-primary); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-primary); resize: vertical; transition: border-color var(--transition-fast); } .content-editor:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } /* ---------------------------------------- AI Review Tab (inline in DraftEditor) ---------------------------------------- */ .ai-review-tab { animation: fadeIn 0.2s ease-out; } .ai-review-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-3xl); color: var(--color-text-secondary); } .ai-review-loading p { margin-top: var(--spacing-md); font-size: var(--font-size-sm); } .ai-review-error { text-align: center; padding: var(--spacing-xl); color: var(--color-error-text); } .ai-review-error p { margin-bottom: var(--spacing-md); } .ai-review-section { margin-bottom: var(--spacing-xl); } .ai-review-section h4 { font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0; padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); } .ai-review-section .section-count { font-weight: var(--font-weight-normal); color: var(--color-text-secondary); } .ai-assessment-card { padding: var(--spacing-lg); border-radius: var(--radius-lg); border-left: 4px solid; } .ai-assessment-card.risk-low { background: var(--color-success-bg); border-left-color: var(--color-success); } .ai-assessment-card.risk-medium { background: var(--color-warning-bg); border-left-color: var(--color-warning); } .ai-assessment-card.risk-high { background: var(--color-error-bg); border-left-color: var(--color-error); } .ai-assessment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); } .ai-assessment-card p { margin: 0; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-primary); } /* Risk Warnings */ .ai-risk-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .ai-risk-card { padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 3px solid; background: var(--color-bg); } .ai-risk-card.severity-high { border-left-color: var(--color-error); background: var(--color-error-bg); } .ai-risk-card.severity-medium { border-left-color: var(--color-warning); background: var(--color-warning-bg); } .ai-risk-card.severity-low { border-left-color: var(--color-info); background: var(--color-info-bg); } .ai-risk-header { margin-bottom: var(--spacing-sm); } .severity-badge { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; } .severity-badge.severity-high { background: var(--color-error); color: white; } .severity-badge.severity-medium { background: var(--color-warning); color: white; } .severity-badge.severity-low { background: var(--color-info); color: white; } .ai-risk-clause { font-size: var(--font-size-sm); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .ai-risk-description { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); line-height: var(--line-height-relaxed); } .ai-risk-recommendation { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-style: italic; } /* Suggestions */ .ai-suggestions-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .ai-suggestion-card { padding: var(--spacing-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .ai-suggestion-card.resolved { opacity: 0.6; background: var(--color-surface); } .ai-suggestion-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); flex-wrap: wrap; } .ai-suggestion-original, .ai-suggestion-proposed { font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); padding: var(--spacing-sm); border-radius: var(--radius-md); line-height: var(--line-height-relaxed); } .ai-suggestion-original { background: var(--color-error-bg); border-left: 3px solid var(--color-error); } .ai-suggestion-original strong, .ai-suggestion-proposed strong { display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); } .ai-suggestion-proposed { background: var(--color-success-bg); border-left: 3px solid var(--color-success); } .ai-suggestion-explanation { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-top: var(--spacing-sm); } .ai-suggestion-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-muted); } .no-suggestions { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--spacing-lg); text-align: center; } .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--spacing-xs); background: var(--color-accent-primary); color: var(--color-text-inverse); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-weight-bold); } .btn-sm { padding: var(--spacing-xs) var(--spacing-md); font-size: var(--font-size-xs); } /* ---------------------------------------- Draft Review ---------------------------------------- */ .draft-review { animation: fadeIn 0.2s ease-out; } .draft-review .btn-back, .draft-review .btn-back-nav { margin-bottom: var(--spacing-lg); } .draft-review > h3 { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-xl) 0; } .review-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-3xl); color: var(--color-text-secondary); } .review-loading p { margin-top: var(--spacing-md); font-size: var(--font-size-sm); } .review-section { margin-bottom: var(--spacing-xl); } .review-section h4 { font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-md) 0; padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); } /* Assessment Card */ .assessment-card { padding: var(--spacing-lg); border-radius: var(--radius-lg); border-left: 4px solid; } .assessment-card.risk-low { background: var(--color-success-bg); border-left-color: var(--color-success); } .assessment-card.risk-medium { background: var(--color-warning-bg); border-left-color: var(--color-warning); } .assessment-card.risk-high { background: var(--color-error-bg); border-left-color: var(--color-error); } .assessment-header { margin-bottom: var(--spacing-md); } .risk-badge { display: inline-flex; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; } .risk-badge.risk-low { background: var(--color-success); color: white; } .risk-badge.risk-medium { background: var(--color-warning); color: white; } .risk-badge.risk-high { background: var(--color-error); color: white; } .assessment-card p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: var(--line-height-relaxed); } /* Compliance Section */ .compliance-ok { padding: var(--spacing-md); background: var(--color-success-bg); color: var(--color-success-text); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .compliance-issues { display: flex; flex-direction: column; gap: var(--spacing-md); } .compliance-issue { padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 3px solid; } .compliance-issue.severity-high, .compliance-issue.severity-critical { background: var(--color-error-bg); border-left-color: var(--color-error); } .compliance-issue.severity-medium { background: var(--color-warning-bg); border-left-color: var(--color-warning); } .compliance-issue.severity-low { background: var(--color-info-bg); border-left-color: var(--color-info); } .compliance-issue strong { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .compliance-issue p { margin: var(--spacing-xs) 0; font-size: var(--font-size-sm); color: var(--color-text-primary); } .compliance-issue .law-ref { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-style: italic; } .compliance-issue .recommendation { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* Suggestions List - Properly Aligned Table */ .suggestions-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .suggestion-card { padding: var(--spacing-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition-fast); } .suggestion-card.resolved { opacity: 0.6; background: var(--color-surface); } .suggestion-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); flex-wrap: wrap; } .priority-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; } .priority-critical { background: var(--color-error); color: white; } .priority-high { background: var(--color-warning); color: white; } .priority-medium { background: var(--color-info); color: white; } .priority-low { background: var(--color-text-muted); color: white; } .suggestion-type { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: capitalize; } .status-tag { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .status-tag.status-accepted { background: var(--color-success-bg); color: var(--color-success-text); } .status-tag.status-rejected { background: var(--color-error-bg); color: var(--color-error-text); } .suggestion-text { margin: 0 0 var(--spacing-xs) 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .suggestion-explanation { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } .suggestion-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-muted); } .btn-accept, .btn-reject { padding: var(--spacing-xs) var(--spacing-md); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); } .btn-accept { background: var(--color-success); color: var(--color-text-inverse); border: 1.5px solid var(--color-success); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .btn-accept:hover { background: var(--color-success-text); border-color: var(--color-success-text); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); transform: translateY(-0.5px); } .btn-reject { background: var(--color-surface); color: var(--color-text-secondary); border: 1.5px solid var(--color-border-strong); } .btn-reject:hover { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); transform: translateY(-0.5px); } /* Review Actions */ .review-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); } .btn-large { padding: 0.75rem 1.75rem; font-size: var(--font-size-base); } .approval-blocked { color: var(--color-error); font-size: var(--font-size-sm); margin: 0; } /* ---------------------------------------- Status Badges (Draft Status) ---------------------------------------- */ .status-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: capitalize; } .status-badge-draft { background: var(--color-surface-elevated); color: var(--color-text-secondary); } .status-badge-review { background: var(--color-info-bg); color: var(--color-info-text); } .status-badge-approved { background: var(--color-success-bg); color: var(--color-success-text); } .status-badge-final { background: var(--color-accent-primary); color: var(--color-text-inverse); } .status-badge-abandoned { background: var(--color-error-bg); color: var(--color-error-text); } /* ---------------------------------------- Responsive Adjustments ---------------------------------------- */ @media (max-width: 1024px) { .drafting-content { grid-template-columns: 1fr; } .drafts-sidebar { position: static; order: -1; } .drafts-list { max-height: none; flex-direction: row; flex-wrap: wrap; gap: var(--spacing-md); } .draft-item { flex: 1; min-width: 200px; max-width: 300px; } } @media (max-width: 768px) { .template-filters { flex-direction: column; } .template-category-filter { min-width: auto; } .template-grid { grid-template-columns: 1fr; } .editor-header { flex-direction: column; align-items: stretch; } .editor-actions { justify-content: flex-end; } .drafts-list { flex-direction: column; } .draft-item { max-width: none; } } /* ============================================ Legal Assistant Chat Component Styles ============================================ */ .legal-assistant-chat { display: flex; flex-direction: column; height: 100%; background: var(--color-surface); } /* Chat Header */ .chat-header { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-accent-primary); color: var(--color-text-inverse); } .chat-header-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-lg); } .chat-header-text h3 { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-inverse); } .chat-header-text p { margin: 0; font-size: var(--font-size-xs); opacity: 0.85; } /* Chat Messages Area */ .chat-messages { flex: 1; overflow-y: auto; padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); } /* Welcome Screen */ .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); color: var(--color-text-secondary); } .welcome-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--color-accent-primary); color: var(--color-text-inverse); border-radius: var(--radius-2xl); margin-bottom: var(--spacing-lg); } .chat-welcome h4 { margin: 0 0 var(--spacing-sm) 0; font-family: var(--font-heading); font-size: var(--font-size-xl); color: var(--color-text-primary); } .chat-welcome p { margin: 0 0 var(--spacing-lg) 0; font-size: var(--font-size-sm); max-width: 360px; line-height: var(--line-height-relaxed); } /* Suggested Questions */ .suggested-questions { width: 100%; max-width: 400px; } .suggestions-header { display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .suggestions-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } .suggestion-btn { padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-sm); color: var(--color-text-primary); text-align: left; cursor: pointer; transition: all var(--transition-fast); } .suggestion-btn:hover { background: var(--color-surface-elevated); border-color: var(--color-accent-primary); color: var(--color-accent-primary); } /* Chat Message Bubbles */ .chat-message { display: flex; gap: var(--spacing-sm); max-width: 85%; } .chat-message.user { align-self: flex-end; flex-direction: row-reverse; } .chat-message.assistant { align-self: flex-start; } .message-avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-surface-elevated); color: var(--color-text-secondary); } .chat-message.assistant .message-avatar { background: var(--color-accent-primary); color: var(--color-text-inverse); } .message-content { display: flex; flex-direction: column; gap: var(--spacing-xs); } .message-text { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); white-space: pre-wrap; word-wrap: break-word; } .chat-message.user .message-text { background: var(--color-accent-primary); color: var(--color-text-inverse); border-bottom-right-radius: var(--radius-sm); } .chat-message.assistant .message-text { background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-primary); border-bottom-left-radius: var(--radius-sm); } .message-time { font-size: var(--font-size-xs); color: var(--color-text-muted); padding: 0 var(--spacing-sm); } /* Message Citations */ .message-citations { margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: var(--color-surface-elevated); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .citations-header { display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent-primary); } .citations-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } /* Citation Card */ .citation-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .citation-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-sm); background: none; border: none; cursor: pointer; font-size: var(--font-size-xs); color: var(--color-text-primary); transition: background var(--transition-fast); } .citation-header:hover { background: var(--color-hover-overlay); } .citation-source { display: flex; align-items: center; gap: var(--spacing-sm); } .citation-jurisdiction { padding: 2px 6px; background: var(--color-accent-primary); color: var(--color-text-inverse); border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-bold); text-transform: uppercase; } .citation-ref { font-weight: var(--font-weight-medium); } .citation-chevron { transition: transform var(--transition-fast); } .citation-chevron.expanded { transform: rotate(180deg); } .citation-content { padding: var(--spacing-sm); border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } .citation-content p { margin: 0 0 var(--spacing-sm) 0; } .citation-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; } .citation-topic { text-transform: capitalize; color: var(--color-text-muted); } .citation-relevance { padding: 2px 6px; background: var(--color-success-bg); color: var(--color-success-text); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); } /* Typing Indicator */ .typing-indicator { display: flex; align-items: center; gap: 4px; padding: var(--spacing-sm) var(--spacing-md); } .typing-indicator span { width: 8px; height: 8px; background: var(--color-text-muted); border-radius: var(--radius-full); animation: typingBounce 1.4s infinite ease-in-out both; } .typing-indicator span:nth-child(1) { animation-delay: -0.32s; } .typing-indicator span:nth-child(2) { animation-delay: -0.16s; } @keyframes typingBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Chat Error */ .chat-error { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); margin: 0 var(--spacing-md); background: var(--color-error-bg); color: var(--color-error-text); border-radius: var(--radius-md); font-size: var(--font-size-sm); } .chat-error button { margin-left: auto; padding: 4px; background: none; border: none; color: var(--color-error-text); cursor: pointer; opacity: 0.7; transition: opacity var(--transition-fast); } .chat-error button:hover { opacity: 1; } /* Chat Input Form */ .chat-input-form { padding: var(--spacing-md); border-top: 1px solid var(--color-border); background: var(--color-surface); } .chat-input-container { display: flex; align-items: flex-end; gap: var(--spacing-sm); padding: var(--spacing-xs); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .chat-input-container:focus-within { border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .chat-input { flex: 1; padding: var(--spacing-sm); background: none; border: none; font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text-primary); resize: none; max-height: 150px; line-height: var(--line-height-normal); } .chat-input:focus { outline: none; } .chat-input::placeholder { color: var(--color-text-muted); } .chat-send-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-accent-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .chat-send-btn:hover:not(:disabled) { background: var(--color-accent-primary-hover); } .chat-send-btn:disabled { background: var(--color-text-muted); cursor: not-allowed; } .chat-disclaimer { margin: var(--spacing-sm) 0 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; } /* ============================================ Global Legal Assistant FAB & Modal ============================================ Floating action button for quick access to AI-powered legal assistant from any view ============================================ */ /* Floating Action Button */ .legal-assistant-fab { position: fixed; bottom: var(--spacing-md); left: var(--spacing-xl); z-index: var(--z-fixed); display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); background: var(--color-accent-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; box-shadow: var(--shadow-lg), 0 0 0 0 rgba(13, 148, 136, 0.4); transition: all var(--transition-normal); animation: fabPulse 2s ease-in-out infinite; } @keyframes fabPulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(13, 148, 136, 0.4); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(13, 148, 136, 0); } } .legal-assistant-fab:hover { background: var(--color-accent-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-xl); animation: none; } .legal-assistant-fab:active { transform: translateY(0); } .legal-assistant-fab svg { flex-shrink: 0; } .fab-label { white-space: nowrap; } /* Modal Overlay */ .legal-assistant-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--spacing-lg); animation: modalOverlayIn 0.2s ease-out; } @keyframes modalOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* Modal Container */ .legal-assistant-modal { position: relative; width: 100%; max-width: 600px; max-height: 85vh; background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); display: flex; flex-direction: column; overflow: hidden; animation: modalSlideIn 0.3s ease-out; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Modal Header */ .legal-assistant-modal-header { position: relative; padding: var(--spacing-lg); background: var(--color-accent-primary); color: var(--color-text-inverse); } .modal-header-title { display: flex; align-items: center; gap: var(--spacing-sm); } .modal-header-title h3 { margin: 0; font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-inverse); } .modal-header-subtitle { margin: var(--spacing-xs) 0 0 0; font-size: var(--font-size-sm); opacity: 0.9; } .modal-close-btn { position: absolute; top: var(--spacing-md); right: var(--spacing-md); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: rgba(255, 255, 255, 0.15); border: none; border-radius: var(--radius-md); color: var(--color-text-inverse); cursor: pointer; transition: all var(--transition-fast); } .modal-close-btn:hover { background: rgba(255, 255, 255, 0.25); } /* Modal Content */ .legal-assistant-modal-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; } /* Override chat styles for modal context */ .legal-assistant-modal-content .legal-assistant-chat { height: 100%; max-height: 60vh; } /* Hide the chat header in modal since modal has its own header */ .legal-assistant-modal-content .chat-header { display: none; } .legal-assistant-modal-content .chat-messages { flex: 1; overflow-y: auto; padding: var(--spacing-md); min-height: 300px; } .legal-assistant-modal-content .chat-input-form { padding: var(--spacing-md); border-top: 1px solid var(--color-border); background: var(--color-surface); } /* Responsive adjustments */ @media (max-width: 768px) { .legal-assistant-fab { bottom: var(--spacing-lg); right: var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-md); } .fab-label { display: none; } .legal-assistant-modal { max-width: none; max-height: none; height: 100%; border-radius: 0; } .legal-assistant-modal-content .legal-assistant-chat { max-height: none; height: 100%; } } /* ============================================ Reorganized Navigation & Layout ============================================ */ /* Top Navigation Menu */ .top-nav-brand { display: flex; align-items: center; gap: var(--spacing-sm); cursor: pointer; padding-right: var(--spacing-md); border-right: 1px solid var(--color-border); margin-right: var(--spacing-sm); } .top-nav-menu { display: flex; align-items: center; gap: 2px; margin-left: var(--spacing-xl); } .nav-item { display: flex; align-items: center; gap: var(--spacing-xs); padding: 6px 12px; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: 13px; font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); position: relative; } .nav-item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .nav-item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .nav-item svg { flex-shrink: 0; } .nav-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--color-danger); color: white; font-size: 11px; font-weight: var(--font-weight-bold); border-radius: 9px; display: flex; align-items: center; justify-content: center; } /* Dashboard Layout */ .dashboard-layout { display: grid; grid-template-columns: 1fr 280px; gap: var(--spacing-lg); max-width: 100%; overflow: visible; box-sizing: border-box; } .dashboard-main { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; } .dashboard-sidebar { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; overflow: hidden; } .sidebar-section { background: var(--color-surface); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-muted); transition: border-color var(--transition-normal); } .sidebar-section h3 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); margin: 0 0 var(--spacing-md) 0; color: var(--color-text-primary); } /* Pipeline Overview */ .pipeline-overview { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } .pipeline-overview:hover { border-color: var(--color-border); } .pipeline-overview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .pipeline-overview-header h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0; color: var(--color-text-primary); } .total-count { font-size: var(--font-size-sm); color: var(--color-text-muted); } .pipeline-stages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--spacing-sm); } .pipeline-stage-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); text-align: center; cursor: pointer; transition: all var(--transition-normal); position: relative; overflow: hidden; } .pipeline-stage-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--stage-color, var(--color-primary)); } .pipeline-stage-card:hover { border-color: var(--stage-color, var(--color-primary)); transform: translateY(-2px); box-shadow: var(--shadow-md); } .stage-count { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1; } .stage-name { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--spacing-xs); text-transform: uppercase; letter-spacing: 0.5px; } /* Stage colors */ :root { --stage-drafting: #3b82f6; --stage-ai-review: #8b5cf6; --stage-review: #f59e0b; --stage-negotiation: #ec4899; --stage-approval: #10b981; --stage-signing: #06b6d4; --stage-active: #22c55e; } /* Action Items Section */ .action-items-section { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); } .section-header h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin: 0; color: var(--color-text-primary); } .item-count { font-size: var(--font-size-sm); color: var(--color-text-muted); } .action-items-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .action-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); text-align: left; width: 100%; } .action-item:hover { background: var(--color-surface-hover); border-color: var(--color-primary-light); } .action-item-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .action-item.urgency-low .action-item-icon { background: var(--color-success-light); color: var(--color-success); } .action-item.urgency-normal .action-item-icon { background: var(--color-primary-light); color: var(--color-primary); } .action-item.urgency-high .action-item-icon { background: var(--color-warning-light); color: var(--color-warning); } .action-item.urgency-critical .action-item-icon { background: var(--color-danger-light); color: var(--color-danger); } .action-item-content { flex: 1; min-width: 0; } .action-item-title { font-weight: var(--font-weight-medium); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action-item-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .action-item-arrow { color: var(--color-text-muted); flex-shrink: 0; } .view-all-btn { width: 100%; padding: 0.625rem 1.375rem; background: transparent; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-accent-primary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-fast); } .view-all-btn:hover { background: var(--color-bg); border-style: solid; border-color: var(--color-accent-primary); } /* Recent Contracts Section */ .recent-contracts-section { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); min-width: 0; } .recent-contracts-section .contract-list { overflow-x: auto; } .recent-contracts-section .filename-text { max-width: 180px; } .actions-col { white-space: nowrap; min-width: 80px; } .btn-link { background: transparent; border: none; color: var(--color-accent-primary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; padding: 0.25rem 0; transition: color var(--transition-fast); } .btn-link:hover { color: var(--color-accent-primary-hover); text-decoration: underline; } /* Contracts Layout */ .contracts-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--spacing-lg); padding: var(--spacing-lg); } .contracts-main { display: flex; flex-direction: column; gap: var(--spacing-lg); } .contracts-header { display: flex; align-items: center; gap: var(--spacing-md); } .contracts-header h2 { margin: 0; flex: 1; } .contracts-sidebar { display: flex; flex-direction: column; gap: var(--spacing-lg); } .active-filter { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-sm); background: var(--color-primary-light); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-primary); } .clear-filter { background: transparent; border: none; color: var(--color-primary); font-weight: var(--font-weight-medium); cursor: pointer; padding: 0; text-decoration: underline; } /* Contract Pipeline Component */ .contract-pipeline { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-md); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow-x: auto; } .contract-pipeline.compact { padding: var(--spacing-sm); } .pipeline-stage-wrapper { display: flex; align-items: center; } .pipeline-stage { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: 2px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); min-width: 80px; } .pipeline-stage:disabled { cursor: default; } .pipeline-stage.completed { background: var(--color-success-light); border-color: var(--color-success); } .pipeline-stage.current { background: var(--color-primary-light); border-color: var(--color-primary); } .pipeline-stage.upcoming { opacity: 0.5; } .stage-icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--color-surface-hover); } .pipeline-stage.completed .stage-icon { background: var(--color-success); color: white; } .pipeline-stage.current .stage-icon { background: var(--color-primary); color: white; } .stage-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-align: center; } .pipeline-stage.completed .stage-label, .pipeline-stage.current .stage-label { color: var(--color-text-primary); } .pipeline-connector { width: 24px; height: 2px; background: var(--color-border); margin: 0 var(--spacing-xs); } .pipeline-connector.completed { background: var(--color-success); } /* Stage Badge */ .stage-badge { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .stage-badge.small { padding: 2px 6px; font-size: 10px; } .stage-badge.large { padding: var(--spacing-sm) var(--spacing-md); font-size: var(--font-size-sm); } .stage-badge svg { width: 14px; height: 14px; } .stage-badge.stage-drafting { background: rgba(59, 130, 246, 0.1); color: var(--color-primary); } .stage-badge.stage-ai_review { background: rgba(139, 92, 246, 0.1); color: var(--color-info); } .stage-badge.stage-internal_review { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); } .stage-badge.stage-negotiation { background: rgba(236, 72, 153, 0.1); color: var(--color-error); } .stage-badge.stage-approval { background: rgba(16, 185, 129, 0.1); color: var(--color-success); } .stage-badge.stage-signing { background: rgba(6, 182, 212, 0.1); color: var(--color-info); } .stage-badge.stage-active { background: rgba(34, 197, 94, 0.1); color: var(--color-success); } /* ============================================ My Tasks Component ============================================ */ .my-tasks { padding: var(--spacing-lg); } .my-tasks-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); } .my-tasks-header h2 { margin: 0; } .my-tasks-actions { display: flex; gap: var(--spacing-sm); align-items: center; } .tasks-tabs { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-sm); } .task-tab { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-normal); } .task-tab:hover { background: var(--color-surface-hover); } .task-tab.active { background: var(--color-primary-light); color: var(--color-primary); } .tab-count { background: var(--color-border); padding: 2px 8px; border-radius: var(--radius-lg); font-size: 11px; } .task-tab.active .tab-count { background: var(--color-primary); color: white; } .tasks-content { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; } .task-section { padding: var(--spacing-md); } .task-item { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); position: relative; } .task-item:last-child { border-bottom: none; } .task-type-indicator { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .task-type-indicator.approval { background: var(--color-primary); } .task-type-indicator.obligation { background: var(--color-warning); } .task-type-indicator.reminder { background: var(--color-info); } .task-type-indicator.task { background: var(--color-success); } .task-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--color-surface-hover); } .task-icon.approval-icon { background: var(--color-primary-light); color: var(--color-primary); } .task-icon.obligation-icon { background: var(--color-warning-light); color: var(--color-warning); } .task-icon.obligation-icon.overdue { background: var(--color-danger-light); color: var(--color-danger); } .task-icon.obligation-icon.urgent { background: var(--color-warning-light); color: var(--color-warning); } .task-icon.reminder-icon { background: var(--color-info-light); color: var(--color-info); } .task-icon.task-priority-icon.priority-high { background: var(--color-warning-light); color: var(--color-warning); } .task-icon.task-priority-icon.priority-low { background: var(--color-success-light); color: var(--color-success); } .task-content { flex: 1; min-width: 0; } .task-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .task-category { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .task-title { font-weight: var(--font-weight-medium); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); } .task-meta { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); font-size: var(--font-size-sm); color: var(--color-text-muted); } .task-meta span::after { content: '•'; margin-left: var(--spacing-sm); color: var(--color-border); } .task-meta span:last-child::after { display: none; } .task-actions { display: flex; gap: var(--spacing-sm); flex-shrink: 0; align-items: center; } .days-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); } .days-badge.normal { background: var(--color-success-light); color: var(--color-success); } .days-badge.soon { background: var(--color-warning-light); color: var(--color-warning); } .days-badge.urgent { background: rgba(249, 115, 22, 0.1); color: var(--color-warning); } .days-badge.overdue { background: var(--color-danger-light); color: var(--color-danger); } .priority-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-transform: capitalize; } .priority-badge.priority-low { background: var(--color-success-light); color: var(--color-success); } .priority-badge.priority-medium { background: var(--color-warning-light); color: var(--color-warning); } .priority-badge.priority-high { background: rgba(249, 115, 22, 0.1); color: var(--color-warning); } .priority-badge.priority-critical { background: var(--color-danger-light); color: var(--color-danger); } .tasks-loading, .tasks-error { padding: var(--spacing-xl); text-align: center; } .empty-state { display: flex; flex-direction: column; align-items: center; padding: var(--spacing-xl); color: var(--color-text-muted); } .empty-state svg { opacity: 0.5; margin-bottom: var(--spacing-md); } .empty-state p { margin: 0; } .empty-state.large { padding: var(--spacing-2xl); } .empty-state.large h3 { margin: 0 0 var(--spacing-sm) 0; color: var(--color-text-primary); } /* ============================================ Drafting Wizard ============================================ */ .drafting-wizard { max-width: 900px; margin: 0 auto; padding: var(--spacing-lg); } .wizard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xl); } .wizard-header h2 { margin: 0; } /* Wizard Steps Indicator */ .wizard-steps { display: flex; align-items: flex-start; margin-bottom: var(--spacing-xl); padding: var(--spacing-lg); background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow-x: auto; } .wizard-step-wrapper { display: flex; align-items: center; flex: 1; } .wizard-step { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); background: transparent; border: none; cursor: pointer; transition: all var(--transition-normal); border-radius: var(--radius-md); text-align: left; } .wizard-step:disabled { cursor: default; opacity: 0.5; } .wizard-step:hover:not(:disabled) { background: var(--color-surface-hover); } .step-number { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); background: var(--color-surface-hover); color: var(--color-text-muted); flex-shrink: 0; } .wizard-step.active .step-number { background: var(--color-primary); color: white; } .wizard-step.completed .step-number { background: var(--color-success); color: white; } .step-info { min-width: 0; } .step-label { font-weight: var(--font-weight-medium); color: var(--color-text-secondary); font-size: var(--font-size-sm); } .wizard-step.active .step-label, .wizard-step.completed .step-label { color: var(--color-text-primary); } .step-description { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step-connector { flex: 1; height: 2px; background: var(--color-border); margin: 0 var(--spacing-sm); min-width: 20px; } .step-connector.completed { background: var(--color-success); } /* Wizard Content */ .wizard-content { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--spacing-xl); margin-bottom: var(--spacing-lg); } .wizard-content h3 { margin: 0 0 var(--spacing-sm) 0; } .step-intro { color: var(--color-text-muted); margin-bottom: var(--spacing-lg); } .wizard-error { background: var(--color-danger-light); color: var(--color-danger); padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-lg); display: flex; justify-content: space-between; align-items: center; } .wizard-error button { background: transparent; border: none; color: var(--color-danger); cursor: pointer; font-weight: var(--font-weight-medium); } /* Form Grid */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .form-group { display: flex; flex-direction: column; gap: var(--spacing-xs); } .form-group.full-width { grid-column: 1 / -1; } .form-group label { font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); color: var(--color-text-primary); } .form-group input, .form-group select, .form-group textarea { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); background: var(--color-surface); color: var(--color-text-primary); transition: border-color var(--transition-normal); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); } .form-group textarea { resize: vertical; min-height: 80px; } .field-help { font-size: var(--font-size-xs); color: var(--color-text-muted); } .value-group .value-input { display: flex; gap: var(--spacing-xs); } .value-group .value-input select { width: 80px; flex-shrink: 0; } .value-group .value-input input { flex: 1; } /* Template Grid in Wizard */ .template-step .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-md); } .template-step .template-card { padding: var(--spacing-lg); border: 2px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-normal); text-align: center; } .template-step .template-card:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .template-step .template-card.selected { border-color: var(--color-primary); background: var(--color-primary-light); } .template-step .template-icon { font-size: 32px; margin-bottom: var(--spacing-sm); } .template-step .template-card h4 { margin: 0 0 var(--spacing-xs) 0; font-size: var(--font-size-md); } .template-step .template-card p { margin: 0 0 var(--spacing-sm) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .template-step .template-meta { display: flex; justify-content: center; gap: var(--spacing-xs); } /* Fill Step */ .fill-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-lg); } .fill-header > div { flex: 1; } .ai-suggest-btn { display: flex; align-items: center; gap: var(--spacing-xs); } .variable-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); } .variable-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .variable-field label { display: flex; align-items: center; gap: var(--spacing-xs); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); } .ai-badge { background: linear-gradient(135deg, var(--color-primary), var(--color-info)); color: white; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: var(--font-weight-bold); } /* Review Step */ .review-loading { text-align: center; padding: var(--spacing-xl); } .review-section { margin-bottom: var(--spacing-lg); } .review-section h4 { margin: 0 0 var(--spacing-md) 0; font-size: var(--font-size-md); } .assessment-card { padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .assessment-card.risk-low { background: var(--color-success-light); border-color: var(--color-success); } .assessment-card.risk-medium { background: var(--color-warning-light); border-color: var(--color-warning); } .assessment-card.risk-high { background: rgba(249, 115, 22, 0.1); border-color: var(--color-warning); } .assessment-card.risk-critical { background: var(--color-danger-light); border-color: var(--color-danger); } .risk-badge { padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } .risk-badge.risk-low { background: var(--color-success); color: white; } .risk-badge.risk-medium { background: var(--color-warning); color: white; } .risk-badge.risk-high { background: var(--color-warning); color: white; } .risk-badge.risk-critical { background: var(--color-danger); color: white; } .compliance-ok { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-success-light); border-radius: var(--radius-md); color: var(--color-success); font-weight: var(--font-weight-medium); } .compliance-issues { display: flex; flex-direction: column; gap: var(--spacing-sm); } .compliance-issue { padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--color-border); } .compliance-issue.severity-high, .compliance-issue.severity-critical { background: var(--color-danger-light); border-color: var(--color-danger); } .compliance-issue.severity-medium { background: var(--color-warning-light); border-color: var(--color-warning); } .issue-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .severity-badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; } .severity-badge.severity-critical { background: var(--color-danger); color: white; } .severity-badge.severity-high { background: var(--color-warning); color: white; } .severity-badge.severity-medium { background: var(--color-warning); color: white; } .issue-clause { font-weight: var(--font-weight-medium); } .issue-text { margin: 0 0 var(--spacing-sm) 0; } .law-ref, .recommendation { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: var(--spacing-xs) 0; } /* Submit Step */ .submit-form { display: flex; flex-direction: column; gap: var(--spacing-lg); } .reviewer-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .reviewer-option { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); } .reviewer-option:hover { background: var(--color-surface-hover); } .reviewer-option input[type="checkbox"] { width: 18px; height: 18px; } .reviewer-info { display: flex; flex-direction: column; } .reviewer-name { font-weight: var(--font-weight-medium); } .reviewer-role { font-size: var(--font-size-sm); color: var(--color-text-muted); } .submit-summary { background: var(--color-surface-hover); padding: var(--spacing-md); border-radius: var(--radius-md); } .submit-summary h4 { margin: 0 0 var(--spacing-md) 0; } .submit-summary dl { display: grid; grid-template-columns: 150px 1fr; gap: var(--spacing-sm); margin: 0; } .submit-summary dt { font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .submit-summary dd { margin: 0; color: var(--color-text-primary); } /* Wizard Actions */ .wizard-actions { display: flex; justify-content: space-between; align-items: center; } .wizard-actions-right { display: flex; gap: var(--spacing-sm); } /* Responsive adjustments for new components */ @media (max-width: 1024px) { .dashboard-layout, .contracts-layout { grid-template-columns: 1fr; } .dashboard-sidebar, .contracts-sidebar { /* Stack vertically instead of hiding */ display: flex; order: 2; } .top-nav-menu { margin-left: var(--spacing-md); } .nav-item span { display: none; } .pipeline-stages-grid { grid-template-columns: repeat(4, 1fr); } .wizard-steps { flex-wrap: wrap; } .step-connector { display: none; } .form-grid { grid-template-columns: 1fr; } .variable-fields { grid-template-columns: 1fr; } } /* ============================ Meeting Transcripts Panel ============================ */ .transcript-panel { padding: 0; } .transcript-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4, 1rem); } .transcript-panel-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary, #1a1a1a); } .transcript-upload-form { background: var(--color-bg-secondary, #f8f9fa); border: 1px solid var(--color-border, var(--color-border)); border-radius: var(--radius-md); padding: var(--spacing-4, 1rem); margin-bottom: var(--spacing-4, 1rem); } .transcript-upload-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3, 0.75rem); } .transcript-upload-form .form-group { margin-bottom: var(--spacing-3, 0.75rem); } .transcript-upload-form label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 4px; color: var(--color-text-secondary, var(--color-text-muted)); } .transcript-upload-form input[type="text"], .transcript-upload-form input[type="date"], .transcript-upload-form input[type="number"], .transcript-upload-form select, .transcript-upload-form textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--color-border, var(--color-border)); border-radius: var(--radius-sm); font-size: 0.9rem; background: var(--color-bg-primary, var(--color-surface)); color: var(--color-text-primary, #1a1a1a); box-sizing: border-box; } .transcript-upload-form textarea { font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.5; resize: vertical; } .transcript-upload-form .form-actions { display: flex; gap: var(--spacing-2, 0.5rem); justify-content: flex-end; margin-top: var(--spacing-3, 0.75rem); } .transcript-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--color-border, var(--color-border)); border-radius: var(--radius-sm); margin-bottom: var(--spacing-3, 0.75rem); background: var(--color-bg-primary, var(--color-surface)); } .transcript-search input { border: none; outline: none; flex: 1; font-size: 0.9rem; background: transparent; color: var(--color-text-primary, #1a1a1a); } .transcript-search svg { color: var(--color-text-secondary, var(--color-text-muted)); flex-shrink: 0; } .transcript-list { display: flex; flex-direction: column; gap: 8px; } .transcript-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid var(--color-border, var(--color-border)); border-radius: var(--radius-md); background: var(--color-bg-primary, var(--color-surface)); cursor: pointer; transition: all var(--transition-fast); text-align: left; width: 100%; font-family: inherit; color: inherit; } .transcript-item:hover { border-color: var(--color-accent-primary, #0d9488); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .transcript-item-icon { color: var(--color-text-secondary, var(--color-text-muted)); flex-shrink: 0; margin-top: 2px; } .transcript-item-content { flex: 1; min-width: 0; } .transcript-item-title { font-weight: 600; font-size: 0.95rem; color: var(--color-text-primary, #1a1a1a); margin-bottom: 4px; } .transcript-item-meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--color-text-secondary, var(--color-text-muted)); margin-bottom: 6px; flex-wrap: wrap; } .transcript-item-preview { font-size: 0.85rem; color: var(--color-text-secondary, var(--color-text-muted)); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .transcript-item-arrow { color: var(--color-text-secondary, var(--color-text-muted)); flex-shrink: 0; margin-top: 4px; } .source-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-lg); font-size: 0.75rem; font-weight: 500; } .source-badge.source-google_meet { background: var(--color-success-light); color: var(--color-success-text); } .source-badge.source-manual { background: var(--color-info-light); color: var(--color-primary); } .source-badge.source-upload { background: var(--color-warning-light); color: var(--color-warning-text); } .transcript-detail { padding: 0; } .transcript-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-4, 1rem); } .transcript-detail-meta { margin-bottom: var(--spacing-4, 1rem); } .transcript-detail-meta h3 { margin: 0 0 8px 0; font-size: 1.2rem; color: var(--color-text-primary, #1a1a1a); } .transcript-meta-row { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--color-text-secondary, var(--color-text-muted)); margin-bottom: 8px; } .transcript-participants { font-size: 0.85rem; color: var(--color-text-secondary, var(--color-text-muted)); } .transcript-content { border: 1px solid var(--color-border, var(--color-border)); border-radius: var(--radius-md); overflow: auto; max-height: 500px; } .transcript-text { padding: 16px; margin: 0; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: var(--color-text-primary, #1a1a1a); } /* .btn-danger defined in main button section above */ @media (max-width: 768px) { .top-nav-menu { display: none; } .pipeline-stages-grid { grid-template-columns: repeat(2, 1fr); } .tasks-tabs { overflow-x: auto; } .transcript-upload-form .form-row { grid-template-columns: 1fr; } } /* ============================================ Calendar Widget Styles ============================================ */ .calendar-widget { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); position: relative; } .calendar-compact { padding: var(--spacing-md); } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); gap: var(--spacing-sm); flex-wrap: wrap; } .calendar-nav { display: flex; align-items: center; gap: var(--spacing-sm); } .calendar-nav-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .calendar-nav-btn:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .calendar-month-title { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); min-width: 160px; text-align: center; margin: 0; } .calendar-actions { display: flex; gap: var(--spacing-sm); align-items: center; } /* Calendar Grid */ .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: var(--spacing-md); } .calendar-day-name { text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); padding: var(--spacing-xs) 0; } .calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 48px; padding: var(--spacing-xs); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: all var(--transition-fast); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-text-primary); gap: 2px; } .calendar-compact .calendar-day { min-height: 36px; } .calendar-day.empty { cursor: default; } .calendar-day:not(.empty):hover { background: var(--color-surface-hover); border-color: var(--color-border); } .calendar-day.today .day-number { background: var(--color-accent-primary); color: var(--color-text-inverse); border-radius: var(--radius-full); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-semibold); } .calendar-day.selected { background: var(--color-primary-light); border-color: var(--color-accent-primary); } .calendar-day.has-events { font-weight: var(--font-weight-medium); } .day-number { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; line-height: 1; } /* Event Dots */ .event-dots { display: flex; gap: 2px; justify-content: center; } .event-dot { width: 6px; height: 6px; border-radius: var(--radius-full); display: inline-block; flex-shrink: 0; } .event-dot-obligation { background: var(--color-error); } .event-dot-task { background: var(--color-primary-hover); } .event-dot-reminder { background: var(--color-warning); } .event-dot-expiry { background: var(--color-warning); } .event-dot-renewal { background: var(--color-success); } /* Calendar Legend */ .calendar-legend { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; padding: var(--spacing-sm) 0; border-top: 1px solid var(--color-border-muted); } .legend-item { display: flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-xs); color: var(--color-text-secondary); } /* Events Panel */ .calendar-events-panel { border-top: 1px solid var(--color-border); padding-top: var(--spacing-md); margin-top: var(--spacing-sm); } .calendar-events-panel h4 { font-family: var(--font-heading); font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--spacing-sm) 0; } .no-events { color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; padding: var(--spacing-md); } .event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-xs); } .event-list-item { padding: 0; } .event-list-btn { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border-muted); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; text-align: left; transition: all var(--transition-fast); font-family: var(--font-body); } .event-list-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border); } .event-type-badge { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; } .event-type-obligation { background: var(--color-error-bg); color: var(--color-error-text); } .event-type-task { background: var(--color-info-bg); color: var(--color-info-text); } .event-type-reminder { background: var(--color-warning-bg); color: var(--color-warning-text); } .event-type-expiry { background: var(--color-warning-bg); color: var(--color-warning-text); } .event-type-renewal { background: var(--color-success-bg); color: var(--color-success-text); } .event-title { font-size: var(--font-size-sm); color: var(--color-text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-contract { font-size: var(--font-size-xs); color: var(--color-text-muted); flex-shrink: 0; } .calendar-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: var(--color-surface); opacity: 0.8; border-radius: var(--radius-lg); } /* View toggle for MyTasks */ .view-toggle { display: flex; gap: 2px; padding: 2px; background: var(--color-surface-hover); border-radius: var(--radius-sm); } .view-toggle-btn { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-md); border: none; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); } .view-toggle-btn:hover { color: var(--color-text-primary); } .view-toggle-btn.active { background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); } /* Calendar section on dashboard (legacy - removed from main) */ .calendar-section { margin-top: var(--spacing-lg); } .calendar-section .section-header { margin-bottom: var(--spacing-md); } /* Sidebar Calendar Widget */ .sidebar-calendar-section { padding: var(--spacing-md) !important; } .sidebar-calendar-section .calendar-widget { border: none; box-shadow: none; padding: 0; } .sidebar-calendar-section .calendar-header { padding: 0 0 var(--spacing-sm) 0; } .sidebar-calendar-section .calendar-grid { gap: 1px; } .sidebar-calendar-section .calendar-day { min-height: 32px; padding: 2px; font-size: var(--font-size-xs); } .sidebar-calendar-section .day-number { width: 22px; height: 22px; font-size: 11px; } .sidebar-calendar-section .calendar-event-dot { width: 4px; height: 4px; } @media (max-width: 640px) { .calendar-grid { gap: 0; } .calendar-day { min-height: 36px; padding: 2px; font-size: var(--font-size-xs); } .day-number { width: 24px; height: 24px; } .calendar-day.today .day-number { width: 24px; height: 24px; } .event-dots { gap: 1px; } .event-dot { width: 4px; height: 4px; } .calendar-legend { gap: var(--spacing-sm); } } /* ============================================ Renewal Panel Styles ============================================ */ .renewal-panel { display: flex; flex-direction: column; gap: var(--spacing-lg); } /* Timeline */ .renewal-timeline h3 { font-size: var(--font-size-md); margin-bottom: var(--spacing-sm); color: var(--color-text-primary); } .renewal-timeline-bar { margin-top: var(--spacing-sm); } .renewal-timeline-track { position: relative; height: 8px; background: var(--color-border); border-radius: var(--radius-sm); margin: var(--spacing-lg) 0 var(--spacing-md); } .renewal-timeline-progress { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--color-success), var(--color-primary)); border-radius: var(--radius-sm); transition: width var(--transition-slow); } .renewal-timeline-marker { position: absolute; top: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; } .renewal-timeline-marker .marker-dot { width: 20px; height: 20px; border-radius: var(--radius-full); border: 3px solid var(--color-surface); box-shadow: var(--shadow-sm); } .action-marker .marker-dot { background: var(--color-warning); } .expiry-marker .marker-dot { background: var(--color-error); } .renewal-timeline-marker .marker-label { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .renewal-timeline-dates { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--spacing-xs); } /* Info Card */ .renewal-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .renewal-info-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); flex-wrap: wrap; } .renewal-status-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: 600; } .renewal-status-active { background: var(--color-success-bg); color: var(--color-success-text); } .renewal-status-notice { background: var(--color-warning-bg); color: var(--color-warning-text); } .renewal-status-due { background: var(--color-warning-bg); color: var(--color-warning-text); } .renewal-status-renewed { background: var(--color-info-bg); color: var(--color-info-text); } .renewal-status-expired { background: var(--color-error-bg); color: var(--color-error-text); } .renewal-status-terminated { background: var(--color-bg); color: var(--color-text-muted); } .renewal-urgency-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; } .renewal-days-remaining { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-left: auto; } .renewal-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-md); } .renewal-info-item { display: flex; flex-direction: column; gap: 4px; } .renewal-info-item label { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .renewal-info-item span { font-size: var(--font-size-sm); color: var(--color-text-primary); } .badge-success { display: inline-block; background: var(--color-success-bg); color: var(--color-success-text); padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: 600; width: fit-content; } .badge-neutral { display: inline-block; background: var(--color-bg); color: var(--color-text-muted); padding: 2px 8px; border-radius: var(--radius-md); font-size: var(--font-size-xs); font-weight: 600; width: fit-content; } .renewal-terms-box { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .renewal-terms-box label { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: var(--spacing-xs); } .renewal-terms-box p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; } /* Action Buttons */ .renewal-actions { display: flex; gap: var(--spacing-sm); } .renewal-actions .btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .btn-danger { background: var(--color-error); color: white; border: none; } .btn-danger:hover { background: var(--color-danger-hover); } /* Action History */ .renewal-action-history { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .renewal-action-history h4 { font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); } .renewal-action-entry { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; } .renewal-action-entry .action-date { font-size: var(--font-size-sm); color: var(--color-text-muted); } .renewal-action-entry .action-note { width: 100%; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--spacing-xs); } /* Reminders */ .renewal-reminders { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .renewal-reminders h4 { font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); } .renewal-reminders-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } .renewal-reminder-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); border-radius: var(--radius-md); background: var(--color-surface-hover); } .renewal-reminder-item.reminder-cancelled { opacity: 0.5; text-decoration: line-through; } .renewal-reminder-item .reminder-date { font-size: var(--font-size-sm); font-weight: 500; min-width: 100px; } .renewal-reminder-item .reminder-days { font-size: var(--font-size-xs); color: var(--color-text-muted); flex: 1; } .reminder-status-badge { font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-md); font-weight: 600; } .reminder-status-badge.status-pending { background: var(--color-warning-bg); color: var(--color-warning-text); } .reminder-status-badge.status-sent { background: var(--color-success-bg); color: var(--color-success-text); } .reminder-status-badge.status-cancelled { background: var(--color-bg); color: var(--color-text-muted); } /* Action Modal */ .renewal-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); } .renewal-modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-xl); max-width: 480px; width: 90%; box-shadow: var(--shadow-xl); } .renewal-modal h3 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); } .renewal-modal p { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .renewal-modal-field { margin-bottom: var(--spacing-md); } .renewal-modal-field label { display: block; font-size: var(--font-size-sm); font-weight: 500; margin-bottom: var(--spacing-xs); } .renewal-modal-field textarea { width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-size-sm); resize: vertical; } .renewal-modal-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); } /* Renewals Sidebar Widget */ .renewals-widget { padding: var(--spacing-md); } .renewals-widget h3 { font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); } .renewals-widget-empty { font-size: var(--font-size-sm); color: var(--color-text-muted); } .renewals-widget-count { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--spacing-sm); } .renewals-widget-list { display: flex; flex-direction: column; gap: var(--spacing-xs); } .renewals-widget-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; width: 100%; text-align: left; transition: background var(--transition-fast); } .renewals-widget-item:hover { background: var(--color-surface-hover); } .renewal-urgency-indicator { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .renewals-widget-item-content { flex: 1; min-width: 0; } .renewals-widget-item-name { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .renewals-widget-item-days { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); } .renewals-widget-arrow { flex-shrink: 0; color: var(--color-text-muted); } .renewals-widget-more { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; margin-top: var(--spacing-xs); } /* ─── TASK MANAGEMENT MODALS & COMPONENTS ───────────────────────── */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-dropdown); padding: var(--spacing-lg); } .modal-content { background: var(--color-bg-primary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-height: 85vh; overflow-y: auto; width: 100%; } .task-detail-modal { max-width: 700px; } .create-task-modal { max-width: 560px; } /* Scoped Create Task form styles — ensures form elements inside the modal are always properly styled regardless of CSS load order or specificity */ .create-task-modal .create-task-form { padding: var(--spacing-lg) var(--spacing-xl); } .create-task-modal .form-field { margin-bottom: var(--spacing-md); } .create-task-modal .form-field label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); } .create-task-modal .form-field input, .create-task-modal .form-field select, .create-task-modal .form-field textarea { display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-family: inherit; background: var(--color-bg-primary); color: var(--color-text-primary); box-sizing: border-box; outline: none; transition: border-color var(--transition-fast); } .create-task-modal .form-field input:focus, .create-task-modal .form-field select:focus, .create-task-modal .form-field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); } .create-task-modal .form-field textarea { resize: vertical; min-height: 80px; } .create-task-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .create-task-modal .form-error { padding: var(--spacing-sm) var(--spacing-md); background: var(--color-error-light); color: var(--color-error); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); border: 1px solid var(--color-error); } .create-task-modal .form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-muted); margin-top: var(--spacing-md); } /* Task Detail modal scoped form styles */ .task-detail-modal .inline-form select, .task-detail-modal .inline-form input[type="text"] { display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); background: var(--color-bg-primary); color: var(--color-text-primary); box-sizing: border-box; margin-bottom: var(--spacing-sm); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-lg) var(--spacing-xl); border-bottom: 1px solid var(--color-border-muted); } .modal-header h3 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); } .modal-close { font-size: 1.5rem; line-height: 1; padding: 4px 8px !important; min-width: auto; } /* Task Detail Status Bar */ .task-detail-status-bar { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-xl); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-muted); flex-wrap: wrap; align-items: center; } .escalation-badge { padding: 2px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border-radius: var(--radius-full); background: var(--color-warning-bg); color: var(--color-warning-text, #856404); border: 1px solid var(--color-warning-border, #ffc107); } .assignee-chip { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-left: auto; } /* Section Tabs */ .task-detail-sections { padding: 0; } .section-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border-muted); padding: 0 var(--spacing-xl); } .section-tab { padding: var(--spacing-sm) var(--spacing-lg); border: none; background: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--transition-fast); } .section-tab:hover { color: var(--color-text-primary); } .section-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .section-tab .tab-count { margin-left: 4px; padding: 1px 6px; font-size: var(--font-size-xs); background: var(--color-bg-tertiary); border-radius: var(--radius-full); } /* Task Detail Body */ .task-detail-body { padding: var(--spacing-lg) var(--spacing-xl); } .detail-field { margin-bottom: var(--spacing-md); } .detail-field label { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--spacing-xs); } .detail-field p { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-primary); } .detail-fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-md); margin-bottom: var(--spacing-lg); } .task-detail-actions { display: flex; gap: var(--spacing-sm); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-muted); } .btn-warning { background: var(--color-warning-bg); color: var(--color-warning-text, #856404); border: 1px solid var(--color-warning-border, #ffc107); } .btn-warning:hover { background: var(--color-warning); color: var(--color-text-primary); } /* Inline Forms (Reassign, Escalate) */ .inline-form { margin-top: var(--spacing-lg); padding: var(--spacing-md); background: var(--color-bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--color-border-muted); } .inline-form h4 { margin: 0 0 var(--spacing-sm) 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .inline-form select, .inline-form input[type="text"] { display: block; width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); background: var(--color-bg-primary); margin-bottom: var(--spacing-sm); } .inline-form-actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); } /* Comments Section */ .task-comments-section { padding: var(--spacing-lg) var(--spacing-xl); } .comments-list { max-height: 300px; overflow-y: auto; margin-bottom: var(--spacing-md); } .comment-item { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border-muted); } .comment-item:last-child { border-bottom: none; } .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-xs); } .comment-header strong { font-size: var(--font-size-sm); } .comment-time { font-size: var(--font-size-xs); color: var(--color-text-muted); } .comment-text { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: var(--line-height-relaxed); } .comment-input { display: flex; flex-direction: column; gap: var(--spacing-sm); } .comment-input textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); resize: vertical; font-family: inherit; } .comment-input .btn { align-self: flex-end; } /* Activity Timeline */ .task-activity-section { padding: var(--spacing-lg) var(--spacing-xl); } .activity-timeline { position: relative; padding-left: var(--spacing-xl); } .activity-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--color-border-muted); } .activity-item { position: relative; padding-bottom: var(--spacing-md); } .activity-item:last-child { padding-bottom: 0; } .activity-dot { position: absolute; left: calc(-1 * var(--spacing-xl) + 4px); top: 4px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-primary); border: 2px solid var(--color-bg-primary); } .activity-content { font-size: var(--font-size-sm); } .activity-header { display: flex; gap: var(--spacing-sm); align-items: center; } .activity-header strong { color: var(--color-text-primary); } .activity-header span { color: var(--color-text-secondary); } .activity-change { display: flex; gap: var(--spacing-xs); align-items: center; margin-top: 2px; font-size: var(--font-size-xs); } .activity-change .old-value { color: var(--color-danger); text-decoration: line-through; } .activity-change .new-value { color: var(--color-success); font-weight: var(--font-weight-medium); } .activity-change .arrow { color: var(--color-text-muted); } .activity-details { margin: 2px 0 0 0; font-size: var(--font-size-xs); color: var(--color-text-muted); font-style: italic; } .activity-time { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Create Task Form */ .create-task-form { padding: var(--spacing-lg) var(--spacing-xl); } .form-error { padding: var(--spacing-sm) var(--spacing-md); background: var(--color-danger-bg, #f8d7da); color: var(--color-danger, #721c24); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); } .form-field { margin-bottom: var(--spacing-md); } .form-field label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--spacing-xs); } .form-field input, .form-field select, .form-field textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); background: var(--color-bg-primary); font-family: inherit; } .form-field textarea { resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } .form-actions { display: flex; justify-content: flex-end; gap: var(--spacing-sm); padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-muted); margin-top: var(--spacing-md); } /* Empty state small variant */ .empty-state.small { padding: var(--spacing-xl); } .empty-state.small p { font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ============================================ Monitor Panel Styles (Obligation Tracker) ============================================ */ .monitor-panel { padding: var(--spacing-md); } .monitor-panel h3 { margin-bottom: var(--spacing-md); } .monitor-success-msg { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-success-bg); color: var(--color-success-text); border-radius: var(--radius-sm); margin-bottom: var(--spacing-md); } .monitor-error-msg { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-error-bg); color: var(--color-error-text); border-radius: var(--radius-sm); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); } .monitor-error-msg .dismiss-btn { margin-left: auto; cursor: pointer; background: none; border: none; color: var(--color-error-text); font-weight: var(--font-weight-medium); } .monitor-summary-stats { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-md); } .monitor-stat-badge { padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .monitor-stat-badge.stat-pending { background-color: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border); } .monitor-stat-badge.stat-overdue { background-color: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error); } .monitor-stat-badge.stat-completed { background-color: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success); } .monitor-table { width: 100%; border-collapse: collapse; } .monitor-table thead tr { background-color: var(--color-surface); } .monitor-table th { padding: var(--spacing-sm); text-align: left; border-bottom: 2px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); } .monitor-table td { padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border-muted); color: var(--color-text-primary); vertical-align: top; } .monitor-table td.obligation-desc { max-width: 300px; } .obligation-desc-link { cursor: pointer; color: var(--color-accent-primary); transition: color var(--transition-fast); } .obligation-desc-link:hover { color: var(--color-accent-primary-hover); } .deadline-days { font-size: var(--font-size-xs); } .deadline-days.days-overdue { color: var(--color-error); } .deadline-days.days-soon { color: var(--color-warning); } .deadline-days.days-normal { color: var(--color-text-muted); } .obligation-status-badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; } .obligation-status-badge.status-pending { background-color: var(--color-surface); color: var(--color-text-secondary); } .obligation-status-badge.status-completed { background-color: var(--color-success-bg); color: var(--color-success-text); } .obligation-status-badge.status-overdue { background-color: var(--color-error-bg); color: var(--color-error-text); } .obligation-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; } .btn-complete { background-color: var(--color-accent-primary); color: var(--color-text-inverse); border: 1px solid var(--color-accent-primary); } .btn-complete:hover { background-color: var(--color-accent-primary-hover); border-color: var(--color-accent-primary-hover); } .btn-outline-primary { background-color: var(--color-surface); color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); } .btn-outline-primary:hover { background-color: var(--color-primary-light); } .btn-outline-secondary { background-color: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); } .btn-outline-secondary:hover { background-color: var(--color-surface-hover); border-color: var(--color-border-strong); } /* Monitor Panel Modals */ .monitor-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); } .monitor-modal { background-color: var(--color-surface); border-radius: var(--radius-lg); padding: var(--spacing-lg); max-width: 500px; width: 90%; max-height: 80vh; overflow: auto; box-shadow: var(--shadow-xl); } .monitor-modal.modal-wide { max-width: 700px; } .monitor-modal h3 { margin-bottom: var(--spacing-md); color: var(--color-text-primary); } .monitor-modal .modal-description { color: var(--color-text-secondary); margin-bottom: var(--spacing-md); } .monitor-modal .form-label { display: block; margin-bottom: var(--spacing-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .monitor-modal .form-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); margin-top: var(--spacing-xs); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text-primary); transition: border-color var(--transition-fast); } .monitor-modal .form-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .monitor-modal .form-textarea { min-height: 80px; resize: vertical; } .monitor-modal .form-textarea-lg { min-height: 100px; } .monitor-modal-actions { display: flex; gap: var(--spacing-sm); justify-content: flex-end; margin-top: var(--spacing-md); } /* Details Modal Sections */ .detail-section { margin-bottom: var(--spacing-lg); } .detail-section h4 { margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); } .detail-empty { color: var(--color-text-muted); font-style: italic; } .detail-items { display: flex; flex-direction: column; gap: var(--spacing-sm); } .detail-note-item { padding: var(--spacing-sm); border-radius: var(--radius-sm); } .detail-note-item.note-completion { background-color: var(--color-success-bg); } .detail-note-item.note-default { background-color: var(--color-surface); } .detail-note-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--spacing-xs); } .detail-reminder-item { padding: var(--spacing-sm); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; } .detail-reminder-item.reminder-sent { background-color: var(--color-success-bg); } .detail-reminder-item.reminder-default { background-color: var(--color-surface); } .detail-reminder-email { font-weight: var(--font-weight-medium); } .detail-reminder-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); } .detail-reminder-actions { display: flex; gap: var(--spacing-sm); } .detail-task-item { padding: var(--spacing-sm); background-color: var(--color-surface); border-radius: var(--radius-sm); border-left: 4px solid var(--color-border); } .detail-task-item.priority-low { border-left-color: var(--color-info); } .detail-task-item.priority-medium { border-left-color: var(--color-success); } .detail-task-item.priority-high { border-left-color: var(--color-warning); } .detail-task-item.priority-urgent { border-left-color: var(--color-error); } .detail-task-header { display: flex; justify-content: space-between; align-items: start; } .detail-task-title { font-weight: var(--font-weight-medium); } .detail-task-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); } .detail-task-priority { padding: 2px var(--spacing-sm); border-radius: var(--radius-sm); font-size: 11px; font-weight: var(--font-weight-bold); text-transform: uppercase; } .detail-task-priority.priority-low { background-color: var(--color-info-bg); color: var(--color-info-text); } .detail-task-priority.priority-medium { background-color: var(--color-success-bg); color: var(--color-success-text); } .detail-task-priority.priority-high { background-color: var(--color-warning-bg); color: var(--color-warning-text); } .detail-task-priority.priority-urgent { background-color: var(--color-error-bg); color: var(--color-error-text); } /* Monitor Panel Loading/Error/Empty States */ .monitor-loading { padding: var(--spacing-lg); text-align: center; color: var(--color-text-muted); } .monitor-error-state { padding: var(--spacing-lg); color: var(--color-error-text); } .monitor-empty-state { padding: var(--spacing-lg); color: var(--color-text-muted); } /* ============================================ Negotiate Panel Styles ============================================ */ .negotiate-panel { padding: var(--spacing-md); } .negotiate-panel h3 { margin-bottom: var(--spacing-md); } .negotiate-intro { margin-bottom: var(--spacing-md); color: var(--color-text-secondary); font-size: var(--font-size-sm); } .negotiate-suggestion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--spacing-sm); overflow: hidden; transition: box-shadow var(--transition-fast); } .negotiate-suggestion:hover { box-shadow: var(--shadow-sm); } .negotiate-suggestion-header { padding: var(--spacing-sm); cursor: pointer; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-surface); transition: background-color var(--transition-fast); } .negotiate-suggestion-header:hover { background-color: var(--color-surface-hover); } .negotiate-suggestion-content { flex: 1; } .negotiate-priority-badge { display: inline-block; padding: 2px var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--color-text-inverse); margin-right: var(--spacing-sm); } .negotiate-priority-badge.priority-critical { background-color: var(--color-error); } .negotiate-priority-badge.priority-high { background-color: var(--color-warning); } .negotiate-priority-badge.priority-medium { background-color: var(--color-info); } .negotiate-priority-badge.priority-low { background-color: var(--color-success); } .negotiate-clause-preview { font-size: var(--font-size-sm); color: var(--color-text-primary); } .negotiate-chevron { color: var(--color-text-muted); flex-shrink: 0; } .negotiate-detail { padding: var(--spacing-md); background-color: var(--color-surface-elevated); } .negotiate-clause-section { margin-bottom: var(--spacing-md); } .negotiate-clause-section h4 { margin-bottom: var(--spacing-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .negotiate-clause-section h4.label-original { color: var(--color-error); } .negotiate-clause-section h4.label-suggested { color: var(--color-success); } .negotiate-clause-section h4.label-strategy { color: var(--color-info); } .negotiate-clause-box { padding: var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } .negotiate-clause-box.box-original { background-color: var(--color-error-bg); color: var(--color-text-primary); } .negotiate-clause-box.box-suggested { background-color: var(--color-success-bg); color: var(--color-text-primary); } .negotiate-strategy-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); } /* Apply Suggestion Section */ .negotiate-apply-section { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .btn-apply-suggestion { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: #16a34a; color: #fff; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); } .btn-apply-suggestion:hover:not(:disabled) { background-color: #15803d; } .btn-apply-suggestion:disabled { opacity: 0.7; cursor: not-allowed; } .negotiate-applied-badge { display: inline-flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: rgba(22, 163, 74, 0.1); color: #16a34a; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } .negotiate-apply-error { margin-top: var(--spacing-sm); color: var(--color-error); font-size: var(--font-size-sm); } /* Legal Validation Section */ .negotiate-validation { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); } .btn-validate { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-accent-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-fast); } .btn-validate:hover:not(:disabled) { background-color: var(--color-accent-primary-hover); } .btn-validate:disabled { opacity: 0.7; cursor: not-allowed; } .validation-result { background-color: var(--color-surface); padding: var(--spacing-sm); border-radius: var(--radius-lg); border: 1px solid var(--color-border); } .validation-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .validation-status { font-weight: var(--font-weight-semibold); } .validation-status.valid { color: var(--color-success); } .validation-status.review { color: var(--color-warning); } .validation-section { margin-bottom: var(--spacing-sm); } .validation-section h5 { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--spacing-xs); } .validation-section ul { margin: 0; padding-left: var(--spacing-lg); font-size: var(--font-size-xs); color: var(--color-text-secondary); } .validation-section p { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-secondary); } .validation-citation { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--spacing-xs); padding-left: var(--spacing-sm); border-left: 2px solid var(--color-border); } .validation-icon-valid { color: var(--color-success); } .validation-icon-review { color: var(--color-warning); } /* Negotiate Panel Loading/Error/Empty */ .negotiate-loading { padding: var(--spacing-lg); text-align: center; color: var(--color-text-secondary); } .negotiate-loading-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: var(--spacing-sm); } .negotiate-error-state { padding: var(--spacing-lg); color: var(--color-error); } .negotiate-empty-state { padding: var(--spacing-lg); color: var(--color-text-muted); } /* ============================================ Contract List Filter Styles ============================================ */ .contract-list-filters { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); align-items: center; } .filter-search-wrapper { flex: 1; position: relative; } .filter-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .filter-search-input { width: 100%; padding: var(--spacing-sm) var(--spacing-md); padding-left: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text-primary); transition: border-color var(--transition-fast); } .filter-search-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .filter-select { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; transition: border-color var(--transition-fast); } .filter-select:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); } .filter-reset-btn { margin-top: var(--spacing-sm); } /* ============================================ COMPREHENSIVE MOBILE RESPONSIVE STYLES ============================================ */ /* Prevent horizontal overflow */ html, body { overflow-x: hidden; } /* ─── Mobile Hamburger Button (hidden on desktop) ─── */ .mobile-hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .mobile-hamburger:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } /* ─── Mobile Menu Overlay & Drawer (hidden on desktop) ─── */ .mobile-menu-overlay { display: none; } /* ============================================ TABLET BREAKPOINT — max-width: 768px ============================================ */ @media (max-width: 768px) { /* ─── Global: prevent horizontal overflow ─── */ html, body { overflow-x: hidden !important; max-width: 100vw !important; } .app-layout, .main-content, .dashboard-layout, .dashboard-main, .dashboard-sidebar, .dashboard-section { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; } /* ─── Pipeline: scrollable on mobile ─── */ .pipeline-overview { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pipeline-stages-grid { min-width: 0; } /* ─── TopNav: show hamburger, hide desktop menu ─── */ .mobile-hamburger { display: flex; order: 10; /* push to right */ } .top-nav-menu { display: none !important; } .top-nav { padding: 0 var(--spacing-sm); height: 56px; } .top-nav-left { flex: 1; } .top-nav-brand { border-right: none; margin-right: 0; padding-right: 0; } .top-nav-logo { font-size: var(--font-size-lg); } .top-nav-right { gap: var(--spacing-xs); } /* Hide desktop theme controls on mobile (available in mobile menu) */ .top-nav-theme-switcher, .top-nav-theme-toggle { display: none; } .top-nav-prototype-label { display: none; } /* User menu: simplify */ .user-menu-name { display: none; } .user-menu-chevron { display: none; } .user-menu-trigger { width: 40px; height: 40px; padding: 0; justify-content: center; } /* ─── Mobile Menu Overlay & Drawer ─── */ .mobile-menu-overlay { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.4); animation: modalOverlayIn 0.2s ease-out; } .mobile-menu-drawer { position: absolute; top: 0; right: 0; width: 280px; max-width: 85vw; height: 100%; background: var(--color-surface); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; animation: mobileDrawerIn 0.25s ease-out; overflow-y: auto; } @keyframes mobileDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .mobile-menu-nav { display: flex; flex-direction: column; padding: var(--spacing-lg) var(--spacing-md); gap: var(--spacing-xs); flex: 1; } .mobile-nav-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 14px var(--spacing-md); background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); min-height: 48px; text-align: left; position: relative; } .mobile-nav-item:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .mobile-nav-item.active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-weight-semibold); } .mobile-nav-item svg { flex-shrink: 0; } .mobile-nav-item .nav-badge { position: static; margin-left: auto; } .mobile-menu-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); border-top: 1px solid var(--color-border); } /* ─── Dashboard Layout: stack vertically ─── */ .dashboard-layout { grid-template-columns: 1fr !important; padding: var(--spacing-md); gap: var(--spacing-md); } .dashboard-sidebar { display: flex !important; order: 2; } .dashboard-main { order: 1; } /* ─── Pipeline cards: 2 columns on tablet ─── */ .pipeline-stages-grid { grid-template-columns: repeat(2, 1fr); } /* ─── Contracts Layout: stack vertically ─── */ .contracts-layout { grid-template-columns: 1fr !important; padding: var(--spacing-md); gap: var(--spacing-md); } .contracts-sidebar { display: flex !important; order: 2; } .contracts-header { flex-wrap: wrap; gap: var(--spacing-sm); } .contracts-header h2 { flex: 1 1 100%; } /* ─── Contract Table: card layout on mobile ─── */ .contract-table thead { display: none; } .contract-table, .contract-table tbody { display: block; width: 100%; } .contract-table tr.contract-row { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-sm); border-left: 3px solid var(--color-accent-secondary); background: var(--color-surface); } .contract-table tr.contract-row:hover { box-shadow: var(--shadow-sm); } .contract-table td { display: flex; align-items: center; justify-content: flex-start; padding: var(--spacing-xs) 0; border-bottom: none; font-size: var(--font-size-sm); text-align: left; gap: var(--spacing-xs); } .contract-table td:first-child { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); } .contract-table .filename-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 80px); } .contract-table .contract-date { color: var(--color-text-muted); font-size: var(--font-size-xs); } /* ─── Contract Detail: full width ─── */ .contract-detail-header { flex-direction: column; align-items: flex-start; padding: var(--spacing-md); gap: var(--spacing-sm); } .contract-detail-title h2 { font-size: 1.1rem; white-space: normal; word-break: break-word; overflow-wrap: break-word; } .contract-meta { width: 100%; flex-wrap: wrap; } .analyze-btn { width: 100%; justify-content: center; } .contract-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--spacing-sm); flex-wrap: nowrap; } .contract-tabs::-webkit-scrollbar { display: none; } .contract-tabs .tab-btn { flex-shrink: 0; } .tab-btn { white-space: nowrap; min-height: 44px; padding: 0.75rem 1rem; } .tab-content { padding: var(--spacing-md); } .extraction-grid { grid-template-columns: 1fr; } /* ─── Drafting Workspace: stack sidebar ─── */ .drafting-content { grid-template-columns: 1fr !important; gap: var(--spacing-md); } .drafting-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .drafting-header h2 { font-size: var(--font-size-xl); } /* Wizard steps: horizontal scroll */ .wizard-steps { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .wizard-steps::-webkit-scrollbar { display: none; } .form-grid, .variable-fields { grid-template-columns: 1fr !important; } .wizard-actions { flex-direction: column; gap: var(--spacing-sm); } .wizard-actions-right { width: 100%; flex-direction: column; } .wizard-actions-right .btn { width: 100%; justify-content: center; } /* ─── Tasks: full-width cards ─── */ .tasks-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tasks-tabs::-webkit-scrollbar { display: none; } /* ─── Modals: near full-screen on mobile ─── */ .modal-overlay { padding: var(--spacing-sm); } .modal-content { max-height: 95vh; border-radius: var(--radius-lg); } .task-detail-modal, .create-task-modal { max-width: none; width: 100%; } .modal-header { padding: var(--spacing-md); } .modal-header h3 { font-size: var(--font-size-base); } .create-task-modal .create-task-form { padding: var(--spacing-md); } .create-task-modal .form-row { grid-template-columns: 1fr; } .task-detail-status-bar { padding: var(--spacing-sm) var(--spacing-md); } /* ─── Main Content: tighter padding ─── */ .main-content { padding: var(--spacing-sm); } /* ─── Stat cards: keep horizontal ─── */ .stat-card { padding: 10px 14px; } .stat-value { font-size: 1.1rem; } /* ─── Upload sidebar ─── */ .upload-sidebar { width: 100%; flex-direction: column; } /* ─── Content area: stack ─── */ .content-area { flex-direction: column; } /* ─── Bottom cards: stack ─── */ .bottom-cards { flex-direction: column; } /* ─── Section headers ─── */ .section-header { flex-wrap: wrap; } /* ─── Action items ─── */ .action-item { padding: var(--spacing-sm) var(--spacing-md); } /* ─── Footer ─── */ .footer { padding: var(--spacing-md); font-size: var(--font-size-sm); } /* ─── General touch targets ─── */ .btn, button { min-height: 44px; } input, select, textarea { min-height: 44px; font-size: 16px; /* Prevents iOS zoom on focus */ } /* ─── Calendar widget: compact ─── */ .calendar-month-title { font-size: var(--font-size-base); min-width: auto; } /* ─── Legal Assistant FAB: icon only ─── */ .legal-assistant-fab { bottom: var(--spacing-md); right: var(--spacing-md); padding: var(--spacing-sm); width: 56px; height: 56px; border-radius: var(--radius-full); justify-content: center; } .fab-label { display: none; } .legal-assistant-modal { max-width: none; max-height: none; height: 100%; width: 100%; border-radius: 0; } /* ─── Drive picker modal: full width ─── */ .drive-picker-modal-overlay { padding: var(--spacing-sm); } .drive-picker-modal { max-width: none; max-height: 90vh; } /* ─── Signing panel mobile ─── */ .signing-header { flex-direction: column; gap: var(--spacing-sm); text-align: center; } .signing-status-display { flex-direction: column; } .signer-card { flex-wrap: wrap; } .btn-sign-now { width: 100%; margin-top: var(--spacing-sm); } .signing-complete-banner { flex-direction: column; text-align: center; } /* ─── Cards padding ─── */ .card, .upload-section, .dashboard-section, .status-section, .features-section, .quick-stats, .sidebar-section { padding: var(--spacing-md); } /* ─── Header adjustments ─── */ .header { padding: var(--spacing-lg) var(--spacing-md); margin: -1rem -0.5rem 1rem -0.5rem; width: calc(100% + 1rem); } .header h1 { font-size: 1.75rem; } /* ─── Transcript upload form ─── */ .transcript-upload-form .form-row { grid-template-columns: 1fr; } /* ─── Change password modal ─── */ .change-password-modal { max-width: none; width: 100%; } /* ─── My Tasks: mobile-friendly header ─── */ .my-tasks-header { flex-wrap: wrap; gap: var(--spacing-sm); } .my-tasks-actions { flex-wrap: wrap; width: 100%; } .my-tasks-actions .btn { flex: 1; min-width: 0; } .view-toggle { flex: 1; } .view-toggle-btn { flex: 1; } .tasks-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .task-tab { white-space: nowrap; flex-shrink: 0; } /* ─── Contracts page: fix overflow ─── */ .contracts-sidebar { max-width: 100%; overflow-x: hidden; } } /* ============================================ PHONE BREAKPOINT — max-width: 480px ============================================ */ @media (max-width: 480px) { /* Even tighter layout */ .main-content { padding: var(--spacing-xs); } .dashboard-layout, .contracts-layout { padding: var(--spacing-xs); gap: var(--spacing-sm); } /* ─── Pipeline cards: single column on phones ─── */ .pipeline-stages-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xs); } .pipeline-stage-card { padding: var(--spacing-sm); } .stage-count { font-size: var(--font-size-xl); } /* ─── Stat cards stacked ─── */ .quick-stats-grid { gap: var(--spacing-xs); } .stat-card { padding: 8px 12px; gap: 10px; } .stat-icon { width: 30px; height: 30px; min-width: 30px; } .stat-value { font-size: 1rem; } /* ─── Action items: more compact ─── */ .action-item { padding: var(--spacing-xs) var(--spacing-sm); } .action-item-icon svg { width: 16px; height: 16px; } .action-item-title { font-size: var(--font-size-sm); } .action-item-subtitle { font-size: var(--font-size-xs); } /* ─── Typography: ensure readability ─── */ body { font-size: 14px; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } /* ─── Section titles ─── */ .upload-section h2, .dashboard-section h2, .status-section h2, .features-section h2, .quick-stats-title { font-size: var(--font-size-base); margin-bottom: var(--spacing-sm); padding-bottom: var(--spacing-xs); } /* ─── Buttons: full-width on small screens ─── */ .contracts-header .btn { width: 100%; justify-content: center; } /* ─── Modals: full screen ─── */ .modal-overlay { padding: 0; } .modal-content { max-height: 100vh; height: 100vh; border-radius: 0; } .task-detail-modal, .create-task-modal { height: auto; max-height: 100vh; } /* ─── TopNav: extra compact ─── */ .top-nav { height: 48px; } .top-nav-logo { font-size: var(--font-size-base); } .top-nav-ai-badge { font-size: 10px; padding: 1px 5px; } /* ─── Cards: minimal padding ─── */ .card, .upload-section, .dashboard-section, .status-section, .features-section, .quick-stats, .sidebar-section { padding: var(--spacing-sm); } .sidebar-section h3 { font-size: var(--font-size-sm); } /* ─── Calendar: extra compact ─── */ .calendar-widget { padding: var(--spacing-sm); } .calendar-day { min-height: 32px; font-size: var(--font-size-xs); } /* ─── Legal AI FAB: smaller ─── */ .legal-assistant-fab { width: 48px; height: 48px; bottom: var(--spacing-sm); right: var(--spacing-sm); } .legal-assistant-fab svg { width: 22px; height: 22px; } /* ─── Contract table cards: tighter ─── */ .contract-table tr.contract-row { padding: var(--spacing-sm); } /* ─── Footer ─── */ .footer { padding: var(--spacing-sm); font-size: var(--font-size-xs); } /* ─── Renewals widget ─── */ .renewals-widget-item { padding: var(--spacing-xs); } /* ─── User menu dropdown ─── */ .user-menu-dropdown { right: -8px; min-width: 180px; } /* ─── Form rows: single column on phones ─── */ .form-row { grid-template-columns: 1fr !important; } /* ─── Task detail body: compact ─── */ .task-detail-body { padding: var(--spacing-md); } .section-tabs { padding: 0 var(--spacing-md); overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .section-tab { white-space: nowrap; flex-shrink: 0; } /* ─── Task actions: stack ─── */ .task-detail-actions { flex-direction: column; } .task-detail-actions .btn { width: 100%; justify-content: center; } /* ─── Monitor modal: near full-screen ─── */ .monitor-modal-overlay { padding: var(--spacing-xs); } .monitor-modal { max-width: none; width: 100%; max-height: 95vh; } /* ─── Renewal modal: near full-screen ─── */ .renewal-modal-overlay { padding: var(--spacing-xs); } .renewal-modal { max-width: none; width: 100%; } /* ─── Renewal actions: stack ─── */ .renewal-actions { flex-direction: column; } .renewal-actions .btn { width: 100%; justify-content: center; } } /* ============================================ ADDITIONAL MOBILE FIXES — ALL PANELS ============================================ */ /* ─── Monitor Panel: scrollable table on mobile ─── */ @media (max-width: 768px) { .monitor-panel { overflow-x: hidden; } .monitor-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .monitor-table th, .monitor-table td { min-width: 100px; } .monitor-table td.obligation-desc { max-width: 200px; white-space: normal; word-break: break-word; } .monitor-summary-stats { flex-wrap: wrap; } .obligation-actions { flex-direction: column; gap: var(--spacing-xs); } .obligation-actions .btn { width: 100%; justify-content: center; min-height: 40px; } /* ─── Renewal Panel: responsive grid ─── */ .renewal-info-grid { grid-template-columns: 1fr; } .renewal-info-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .renewal-days-remaining { margin-left: 0; } .renewal-actions { flex-direction: column; } .renewal-actions .btn { width: 100%; justify-content: center; } .renewal-timeline-dates { font-size: 10px; } .renewal-reminder-item { flex-wrap: wrap; gap: var(--spacing-xs); } .renewal-reminder-item .reminder-date { min-width: auto; } /* ─── Negotiate Panel: prevent overflow ─── */ .negotiate-panel { overflow-x: hidden; } .negotiate-clause-box { word-break: break-word; overflow-wrap: break-word; } .negotiate-strategy-text { word-break: break-word; } .negotiate-detail { padding: var(--spacing-sm); } .negotiate-suggestion-header { padding: var(--spacing-sm); } .negotiate-suggestion-content { min-width: 0; } .negotiate-clause-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: calc(100vw - 100px); } /* ─── Validation result: compact ─── */ .validation-result { padding: var(--spacing-sm); } .validation-section ul { padding-left: var(--spacing-md); } /* ─── Calendar: responsive events panel ─── */ .calendar-header { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); } .calendar-nav { justify-content: space-between; width: 100%; } .calendar-actions { justify-content: flex-end; } .event-list-btn { flex-wrap: wrap; gap: var(--spacing-xs); } .event-contract { width: 100%; order: 3; } /* ─── Risk panel: compact on mobile ─── */ .risk-panel-actions { width: 100%; } .risk-action-btn { flex: 1; text-align: center; justify-content: center; } /* ─── Contract list filters: stack on mobile ─── */ .contract-list-filters { flex-direction: column; align-items: stretch; } .filter-select { width: 100%; } /* ─── Transcript panel: responsive ─── */ .transcript-item { flex-wrap: wrap; } .transcript-item-preview { width: 100%; } .transcript-detail-header { flex-wrap: wrap; gap: var(--spacing-sm); } .transcript-content { max-height: 350px; } /* ─── Drafting workspace: compact wizard ─── */ .drafting-wizard { padding: var(--spacing-sm); } .wizard-content { padding: var(--spacing-md); } .wizard-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); } .wizard-header h2 { font-size: var(--font-size-xl); } /* ─── Template grid in wizard: single column ─── */ .template-step .template-grid { grid-template-columns: 1fr; } /* ─── Editor tabs: scrollable ─── */ .editor-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .editor-tabs::-webkit-scrollbar { display: none; } .editor-tabs .tab { white-space: nowrap; flex-shrink: 0; } /* ─── Content editor: full width ─── */ .content-editor { min-height: 250px; } /* ─── AI review cards: compact ─── */ .ai-suggestion-header { flex-direction: column; align-items: flex-start; } .ai-suggestion-actions { flex-direction: column; } .ai-suggestion-actions .btn { width: 100%; justify-content: center; } /* ─── Suggestion actions in draft review ─── */ .suggestion-actions { flex-direction: column; } .suggestion-actions .btn { width: 100%; justify-content: center; } /* ─── Review actions: full width ─── */ .review-actions { width: 100%; } .review-actions .btn { width: 100%; justify-content: center; } /* ─── Form actions: stack buttons ─── */ .form-actions { flex-direction: column; } .form-actions .btn { width: 100%; justify-content: center; } /* ─── Signing panel: responsive ─── */ .signing-complete-text { word-break: break-word; } .sharepoint-link { word-break: break-all; font-size: var(--font-size-xs); } /* ─── Change password modal: full width ─── */ .change-password-modal .modal-body { padding: var(--spacing-md); } /* ─── Submit summary: responsive dl ─── */ .submit-summary dl { grid-template-columns: 1fr; } .submit-summary dt { margin-top: var(--spacing-sm); } /* ─── Pipeline compact: scrollable ─── */ .contract-pipeline { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ─── Detail fields grid: single column ─── */ .detail-fields-grid { grid-template-columns: 1fr; } /* ─── Inline form buttons: stack ─── */ .inline-form-actions { flex-direction: column; } .inline-form-actions .btn { width: 100%; justify-content: center; } /* ─── Monitor modal actions: stack ─── */ .monitor-modal-actions { flex-direction: column; } .monitor-modal-actions .btn { width: 100%; justify-content: center; } /* ─── Renewal modal actions: stack ─── */ .renewal-modal-actions { flex-direction: column; } .renewal-modal-actions .btn { width: 100%; justify-content: center; } } /* ========== Edit Tab Styles ========== */ .edit-tab-panel { display: flex; flex-direction: column; height: 100%; min-height: 500px; } .edit-tab-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 16px 0; border-bottom: 1px solid var(--color-border, #e2e8f0); margin-bottom: 16px; } .edit-tab-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--color-text-primary, #1e293b); } .edit-tab-actions { display: flex; align-items: center; gap: 12px; } .edit-unsaved-indicator { font-size: 0.85rem; color: #f59e0b; font-style: italic; display: flex; align-items: center; gap: 4px; } .edit-unsaved-indicator::before { content: "●"; font-size: 0.7rem; } .contract-text-editor { flex: 1; width: 100%; min-height: 450px; padding: 20px; font-family: "JetBrains Mono", "Noto Sans Arabic", sans-serif; font-size: 0.9rem; line-height: 1.8; color: var(--color-text-primary, #1e293b); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 8px); resize: vertical; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; transition: border-color 0.2s ease; } .contract-text-editor:focus { outline: none; border-color: var(--color-accent, #0D9488); box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15); } .reanalyze-prompt { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.25); border-radius: var(--radius-md, 8px); margin-bottom: 16px; flex-wrap: wrap; } .reanalyze-prompt svg { color: var(--color-accent, #0D9488); flex-shrink: 0; } .reanalyze-prompt span { flex: 1; font-size: 0.9rem; color: var(--color-text-primary, #1e293b); } /* Dark mode for edit tab */ [data-theme="dark"] .contract-text-editor { background: var(--color-surface, #1e293b); color: var(--color-text-primary, #e2e8f0); border-color: var(--color-border, #334155); } [data-theme="dark"] .contract-text-editor:focus { border-color: var(--color-accent, #14b8a6); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15); } [data-theme="dark"] .reanalyze-prompt { background: rgba(20, 184, 166, 0.1); border-color: rgba(20, 184, 166, 0.3); } /* ========== Document Text Viewer (in Extractions tab) ========== */ .document-text-viewer { margin-bottom: 1.5rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 8px); overflow: hidden; } .document-text-toggle { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary, #1e293b); background: var(--color-surface-elevated, #f8fafc); user-select: none; transition: background 0.2s; } .document-text-toggle:hover { background: var(--color-bg-hover, #f1f5f9); } .document-text-toggle svg { color: var(--color-accent, #0D9488); flex-shrink: 0; } .document-text-viewer[open] .document-text-toggle { border-bottom: 1px solid var(--color-border, #e2e8f0); } .document-text-content { max-height: 400px; overflow-y: auto; padding: 16px 20px; background: var(--color-surface, #ffffff); } .document-text-content pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: "Noto Sans Arabic", "Segoe UI", "Arial", sans-serif; font-size: 0.95rem; line-height: 2; color: var(--color-text-secondary, #475569); } /* Dark mode */ [data-theme="dark"] .document-text-toggle { background: var(--color-surface, #1e293b); color: var(--color-text-primary, #e2e8f0); } [data-theme="dark"] .document-text-toggle:hover { background: var(--color-surface-elevated, #334155); } [data-theme="dark"] .document-text-content { background: var(--color-bg, #0f172a); } [data-theme="dark"] .document-text-content pre { color: var(--color-text-secondary, #94a3b8); } /* ============================================= TipTap Rich Text Editor Styles ============================================= */ .tiptap-editor-wrapper { border: 1px solid var(--color-border, #e2e8f0); border-radius: 8px; overflow: hidden; background: var(--color-surface, #ffffff); display: flex; flex-direction: column; } .tiptap-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--color-border, #e2e8f0); background: var(--color-surface-elevated, #f8fafc); flex-wrap: wrap; min-height: 42px; } .tiptap-toolbar-group { display: flex; align-items: center; gap: 2px; } .tiptap-toolbar-divider { width: 1px; height: 24px; background: var(--color-border, #e2e8f0); margin: 0 4px; } .tiptap-toolbar-spacer { flex: 1; } .tiptap-toolbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: 4px; cursor: pointer; color: var(--color-text-secondary, #64748b); font-size: 13px; font-weight: 600; transition: all 0.15s ease; padding: 0; } .tiptap-toolbar-btn:hover { background: var(--color-surface-hover, #f1f5f9); color: var(--color-text, #1e293b); } .tiptap-toolbar-btn.is-active { background: var(--color-accent, #0D9488); color: #ffffff; } .tiptap-toolbar-btn.is-active:hover { background: #0b8578; } .tiptap-toolbar-btn:disabled { opacity: 0.35; cursor: not-allowed; } .tiptap-toolbar-btn svg { width: 16px; height: 16px; } /* Editor content area (ProseMirror) */ .tiptap-editor-content .ProseMirror { min-height: 450px; max-height: 75vh; overflow-y: auto; padding: 16px 20px; font-family: "Inter", "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.7; color: var(--color-text, #1e293b); outline: none; } .tiptap-editor-content .ProseMirror:focus { outline: none; } .tiptap-editor-content .ProseMirror p { margin: 0 0 0.75em 0; } .tiptap-editor-content .ProseMirror h1 { font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; color: var(--color-text, #1e293b); } .tiptap-editor-content .ProseMirror h2 { font-size: 1.25em; font-weight: 600; margin: 0.8em 0 0.4em; color: var(--color-text, #1e293b); } .tiptap-editor-content .ProseMirror h3 { font-size: 1.1em; font-weight: 600; margin: 0.6em 0 0.3em; color: var(--color-text, #1e293b); } .tiptap-editor-content .ProseMirror ul, .tiptap-editor-content .ProseMirror ol { padding-left: 1.5em; margin: 0.5em 0; } .tiptap-editor-content .ProseMirror li { margin: 0.2em 0; } .tiptap-editor-content .ProseMirror mark { background: #fef08a; padding: 0 2px; border-radius: 2px; } .tiptap-editor-content .ProseMirror blockquote { border-left: 3px solid var(--color-accent, #0D9488); padding-left: 1em; margin: 0.5em 0; color: var(--color-text-secondary, #64748b); } .tiptap-editor-content .ProseMirror p.is-editor-empty:first-child::before { color: var(--color-text-muted, #94a3b8); content: attr(data-placeholder); float: left; height: 0; pointer-events: none; } /* RTL support */ .tiptap-editor-content .ProseMirror[dir="rtl"] { text-align: right; font-family: "Noto Sans Arabic", "Segoe UI", sans-serif; } .tiptap-editor-content .ProseMirror[dir="rtl"] ul, .tiptap-editor-content .ProseMirror[dir="rtl"] ol { padding-left: 0; padding-right: 1.5em; } .tiptap-editor-content .ProseMirror[dir="rtl"] blockquote { border-left: none; border-right: 3px solid var(--color-accent, #0D9488); padding-left: 0; padding-right: 1em; } /* Source view textarea */ .tiptap-source-editor { width: 100%; min-height: 450px; max-height: 75vh; padding: 16px 20px; border: none; outline: none; resize: vertical; font-family: "JetBrains Mono", "Fira Code", monospace; font-size: 13px; line-height: 1.6; color: var(--color-text, #1e293b); background: var(--color-surface, #ffffff); box-sizing: border-box; } /* Dark mode */ [data-theme="dark"] .tiptap-editor-wrapper { border-color: var(--color-border, #334155); background: var(--color-surface, #1e293b); } [data-theme="dark"] .tiptap-toolbar { background: var(--color-surface-elevated, #1e293b); border-bottom-color: var(--color-border, #334155); } [data-theme="dark"] .tiptap-toolbar-divider { background: var(--color-border, #334155); } [data-theme="dark"] .tiptap-toolbar-btn { color: var(--color-text-secondary, #94a3b8); } [data-theme="dark"] .tiptap-toolbar-btn:hover { background: var(--color-surface-hover, #334155); color: var(--color-text, #e2e8f0); } [data-theme="dark"] .tiptap-toolbar-btn.is-active { background: var(--color-accent, #0D9488); color: #ffffff; } [data-theme="dark"] .tiptap-editor-content .ProseMirror { color: var(--color-text, #e2e8f0); } [data-theme="dark"] .tiptap-editor-content .ProseMirror h1, [data-theme="dark"] .tiptap-editor-content .ProseMirror h2, [data-theme="dark"] .tiptap-editor-content .ProseMirror h3 { color: var(--color-text, #e2e8f0); } [data-theme="dark"] .tiptap-editor-content .ProseMirror mark { background: #854d0e; color: #fef08a; } [data-theme="dark"] .tiptap-source-editor { color: var(--color-text, #e2e8f0); background: var(--color-surface, #1e293b); } /* ========== Extraction Edit/Delete Button Visibility ========== */ .extraction-actions { display: flex; align-items: center; gap: 4px; opacity: 0.6; transition: opacity 0.2s; } .extraction-item:hover .extraction-actions, .obligation-item:hover .extraction-actions { opacity: 1; } .extraction-actions .btn-edit { color: var(--color-accent, #0D9488); border: 1px solid var(--color-accent, #0D9488); padding: 4px; border-radius: 4px; } .extraction-actions .btn-edit:hover { background: rgba(13, 148, 136, 0.1); } .extraction-actions .btn-delete { color: #ef4444; border: 1px solid #ef4444; padding: 4px; border-radius: 4px; } .extraction-actions .btn-delete:hover { background: rgba(239, 68, 68, 0.1); } /* Dark mode */ [data-theme="dark"] .extraction-actions .btn-edit { color: #14b8a6; border-color: #14b8a6; } [data-theme="dark"] .extraction-actions .btn-delete { color: #f87171; border-color: #f87171; } /* ========== Export Dropdown ========== */ .export-dropdown-wrapper { position: relative; } .btn-export { display: inline-flex; align-items: center; gap: 6px; } .export-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: var(--z-dropdown, 1000); min-width: 220px; overflow: hidden; } .export-dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border: none; background: none; cursor: pointer; font-size: 0.85rem; color: var(--color-text-primary, #1e293b); text-align: left; transition: background 0.15s; } .export-dropdown-menu button:hover { background: var(--color-bg-hover, #f1f5f9); } .export-dropdown-menu button svg { flex-shrink: 0; color: var(--color-text-secondary, #64748b); } .export-dropdown-menu button + button { border-top: 1px solid var(--color-border-muted, #f1f5f9); } /* Dark mode */ [data-theme="dark"] .export-dropdown-menu { background: var(--color-surface, #1e293b); border-color: var(--color-border, #334155); box-shadow: 0 4px 16px rgba(0,0,0,0.3); } [data-theme="dark"] .export-dropdown-menu button:hover { background: var(--color-surface-elevated, #334155); } /* ─── Google Drive Settings ─────────────────────────────────── */ .gdrive-settings { max-width: 800px; margin: 0 auto; padding: 2rem; } .gdrive-settings-header h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; display: flex; align-items: center; } .gdrive-settings-subtitle { color: var(--color-text-secondary, #64748b); margin-bottom: 1.5rem; } .gdrive-section { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; } .gdrive-section h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; } .gdrive-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .gdrive-section-header h3 { margin-bottom: 0; } .gdrive-section-desc { color: var(--color-text-secondary, #64748b); margin-bottom: 1rem; font-size: 0.9rem; } /* Folder display */ .gdrive-folder-selected { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: var(--color-surface-elevated, #f8fafc); border-radius: 8px; border: 1px solid var(--color-border, #e2e8f0); } .gdrive-folder-info { display: flex; align-items: center; gap: 0.75rem; } .gdrive-folder-icon { color: var(--color-primary, #4f46e5); flex-shrink: 0; } .gdrive-folder-name { font-weight: 600; font-size: 1rem; } .gdrive-folder-id { font-size: 0.75rem; color: var(--color-text-secondary, #94a3b8); font-family: monospace; } .gdrive-folder-empty { text-align: center; padding: 2rem; color: var(--color-text-secondary, #64748b); } .gdrive-folder-empty p { margin-bottom: 1rem; } /* Error */ .gdrive-error { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; color: #dc2626; margin-bottom: 1.5rem; font-size: 0.9rem; } .gdrive-error-dismiss { margin-left: auto; background: none; border: none; color: #dc2626; cursor: pointer; font-size: 1.2rem; padding: 0 0.25rem; } [data-theme="dark"] .gdrive-error { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; } /* Validation */ .gdrive-validation-summary { display: flex; gap: 1.5rem; margin-bottom: 1rem; } .gdrive-stat { text-align: center; } .gdrive-stat-value { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-text-primary, #1e293b); } .gdrive-stat-label { font-size: 0.8rem; color: var(--color-text-secondary, #64748b); text-transform: uppercase; letter-spacing: 0.05em; } .gdrive-stat-success .gdrive-stat-value { color: #16a34a; } .gdrive-stat-warning .gdrive-stat-value { color: #ea580c; } /* Progress bar */ .gdrive-progress { height: 8px; background: var(--color-surface-elevated, #e2e8f0); border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; } .gdrive-progress-bar { height: 100%; background: linear-gradient(90deg, #4f46e5, #7c3aed); border-radius: 4px; transition: width 0.5s ease; min-width: 2px; } .gdrive-progress-label { font-size: 0.85rem; color: var(--color-text-secondary, #64748b); margin-bottom: 1rem; } /* Missing list */ .gdrive-missing-list { margin-top: 1rem; } .gdrive-missing-list h4 { font-size: 0.9rem; margin-bottom: 0.5rem; } .gdrive-missing-items { max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px; } .gdrive-missing-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; font-size: 0.85rem; border-bottom: 1px solid var(--color-border, #e2e8f0); } .gdrive-missing-item:last-child { border-bottom: none; } .gdrive-missing-filename { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; } .gdrive-missing-reason { font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; font-weight: 500; } .reason-no_google_doc { background: #fef3c7; color: #92400e; } .reason-doc_not_found, .reason-doc_trashed { background: #fecaca; color: #991b1b; } .reason-wrong_folder { background: #dbeafe; color: #1d4ed8; } .reason-check_failed { background: #f3f4f6; color: #6b7280; } [data-theme="dark"] .reason-no_google_doc { background: #451a03; color: #fcd34d; } [data-theme="dark"] .reason-doc_not_found, [data-theme="dark"] .reason-doc_trashed { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .reason-wrong_folder { background: #172554; color: #93c5fd; } .gdrive-validation-empty { text-align: center; padding: 1.5rem; color: var(--color-text-secondary, #64748b); } /* Sync result */ .gdrive-sync-result { margin-top: 1rem; padding: 1rem; background: var(--color-surface-elevated, #f8fafc); border-radius: 8px; border: 1px solid var(--color-border, #e2e8f0); } .gdrive-sync-summary { display: flex; gap: 1rem; flex-wrap: wrap; } .gdrive-sync-stat { font-size: 0.9rem; font-weight: 500; } .gdrive-sync-error { color: #dc2626; } .gdrive-sync-errors { margin-top: 0.75rem; font-size: 0.85rem; } .gdrive-sync-error-item { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--color-border, #e2e8f0); } .gdrive-sync-error-detail { color: #dc2626; font-size: 0.8rem; } /* Spinner */ .gdrive-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gdrive-spin 0.6s linear infinite; vertical-align: middle; margin-right: 0.5rem; } @keyframes gdrive-spin { to { transform: rotate(360deg); } } /* Auth required state */ .gdrive-auth-required { text-align: center; padding: 3rem 2rem; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e2e8f0); border-radius: 12px; } .gdrive-auth-icon { color: var(--color-text-secondary, #94a3b8); margin-bottom: 1rem; } .gdrive-auth-required h3 { margin-bottom: 0.5rem; } .gdrive-auth-required p { color: var(--color-text-secondary, #64748b); margin-bottom: 1.5rem; } /* Modal */ .gdrive-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; } .gdrive-modal { background: var(--color-surface, #fff); border-radius: 16px; width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .gdrive-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border, #e2e8f0); } .gdrive-modal-header h3 { font-size: 1.1rem; font-weight: 600; margin: 0; } .gdrive-modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--color-text-secondary, #64748b); padding: 0.25rem; line-height: 1; } .gdrive-modal-close:hover { color: var(--color-text-primary, #1e293b); } /* Breadcrumbs */ .gdrive-breadcrumbs { padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--color-border, #e2e8f0); font-size: 0.85rem; overflow-x: auto; white-space: nowrap; } .gdrive-breadcrumb { background: none; border: none; cursor: pointer; color: var(--color-primary, #4f46e5); font-size: 0.85rem; padding: 0; } .gdrive-breadcrumb.active { color: var(--color-text-primary, #1e293b); font-weight: 600; cursor: default; } .gdrive-breadcrumb:hover:not(.active) { text-decoration: underline; } .gdrive-breadcrumb-sep { margin: 0 0.35rem; color: var(--color-text-secondary, #94a3b8); } /* Folder list */ .gdrive-folder-list { flex: 1; overflow-y: auto; padding: 0.5rem; min-height: 200px; max-height: 400px; } .gdrive-folder-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 8px; transition: background 0.15s; } .gdrive-folder-row:hover { background: var(--color-surface-elevated, #f1f5f9); } .gdrive-folder-nav { display: flex; align-items: center; gap: 0.6rem; background: none; border: none; cursor: pointer; color: var(--color-text-primary, #1e293b); font-size: 0.9rem; padding: 0.35rem 0; flex: 1; text-align: left; } .gdrive-folder-nav svg { color: var(--color-primary, #4f46e5); flex-shrink: 0; } .gdrive-select-btn { flex-shrink: 0; opacity: 0; transition: opacity 0.15s; } .gdrive-folder-row:hover .gdrive-select-btn { opacity: 1; } .gdrive-loading { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--color-text-secondary, #64748b); } .gdrive-empty-folder { text-align: center; padding: 2rem; color: var(--color-text-secondary, #64748b); } .gdrive-empty-hint { font-size: 0.85rem; margin-top: 0.5rem; } .gdrive-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--color-border, #e2e8f0); text-align: right; } /* Button helpers */ .btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; } /* Dark theme overrides */ [data-theme="dark"] .gdrive-section { background: var(--color-surface, #1e293b); border-color: var(--color-border, #334155); } [data-theme="dark"] .gdrive-folder-selected { background: var(--color-surface-elevated, #0f172a); border-color: var(--color-border, #334155); } [data-theme="dark"] .gdrive-modal { background: var(--color-surface, #1e293b); } [data-theme="dark"] .gdrive-sync-result { background: var(--color-surface-elevated, #0f172a); border-color: var(--color-border, #334155); } /* ============================================ MOBILE RESPONSIVE FIXES — 2025-02-02 Priority: Contract Detail > Contracts List > Dashboard ============================================ */ /* ─── 1. CONTRACT DETAIL — Tab Bar Scrollable ─── */ @media (max-width: 768px) { .contract-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--spacing-sm); gap: 0; } .contract-tabs::-webkit-scrollbar { display: none; } .contract-tabs .tab-btn { flex-shrink: 0; white-space: nowrap; padding: 0.65rem 0.85rem; font-size: 0.8rem; min-height: 44px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-right: 2px; } .contract-tabs .tab-btn svg { width: 14px; height: 14px; } } /* ─── 1a-extra. Tab scroll hint — gradient fade on right edge ─── */ @media (max-width: 768px) { .contract-tabs { position: relative; mask-image: linear-gradient(to right, black 85%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%); } } /* ─── 1b. CONTRACT DETAIL — Confidence badges & edit/delete buttons ─── */ @media (max-width: 640px) { /* Make extraction header stack vertically so badges don't overlap */ .extraction-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); } .extraction-header .confidence-indicator { order: 2; } .extraction-header .extraction-actions { order: 3; } /* Confidence indicator: smaller, inline */ .confidence-indicator { flex-shrink: 0; } .confidence-bar-container { width: 36px; height: 4px; } .confidence-label { font-size: 0.65rem; min-width: 28px; } /* Edit/delete action buttons: smaller but still tappable */ .extraction-actions { opacity: 1; /* Always visible on mobile (no hover) */ } .extraction-actions .btn-edit, .extraction-actions .btn-delete { padding: 6px; min-width: 32px; min-height: 32px; } /* Extraction items: tighter padding */ .extraction-item { padding: var(--spacing-sm); } .extraction-value { font-size: var(--font-size-sm); } .extraction-label { font-size: 0.7rem; } } /* ─── 1c. CONTRACT DETAIL — Header: Export/Delete buttons stack ─── */ @media (max-width: 640px) { .contract-detail-header { flex-direction: column; align-items: flex-start !important; gap: var(--spacing-sm); padding: var(--spacing-md); } .header-actions { flex-wrap: wrap; width: 100%; gap: var(--spacing-xs); margin-left: 0; } .header-actions .btn { flex: 1 1 auto; min-width: 0; justify-content: center; font-size: var(--font-size-xs); padding: 0.5rem 0.75rem; } .btn-export, .btn-delete-contract-detail { margin-left: 0 !important; } .delete-confirm-group { width: 100%; margin-left: 0; flex-wrap: wrap; } .delete-confirm-label { width: 100%; text-align: center; } /* Re-analyze button: full width */ .analyze-btn { width: 100%; justify-content: center; } } /* ─── 1d. CONTRACT DETAIL — Obligation cards: deadline badges ─── */ @media (max-width: 640px) { .obligation-header { flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); } .obligation-deadline { max-width: 100%; word-break: break-word; white-space: normal; font-size: 0.75rem; } .obligation-item { padding: var(--spacing-sm); } .obligation-text { font-size: var(--font-size-sm); word-break: break-word; } .obligation-party { font-size: 0.8rem; } } /* ─── 1e. CONTRACT DETAIL — Arabic RTL text alignment ─── */ @media (max-width: 768px) { .extraction-value { word-break: break-word; overflow-wrap: break-word; } /* RTL text in extraction values should align right within LTR layout */ .extraction-value[dir="rtl"], .extraction-value .rtl-text, .obligation-text[dir="rtl"], .obligation-text .rtl-text { direction: rtl; text-align: right; unicode-bidi: isolate; display: block; width: 100%; } /* Arabic party names */ .obligation-party[dir="rtl"], .obligation-party .rtl-text { direction: rtl; text-align: right; unicode-bidi: isolate; } } /* ─── 2. CONTRACTS LIST — Upload sidebar hidden on mobile ─── */ @media (max-width: 768px) { .contracts-sidebar { display: none !important; } .contracts-layout { grid-template-columns: 1fr !important; } /* Search bar + filter row: stack and breathe */ .contracts-header { flex-direction: column; align-items: stretch; gap: var(--spacing-sm); } .contracts-header h2 { font-size: var(--font-size-xl); } .contract-list-filters { flex-direction: column; gap: var(--spacing-sm); } .contract-list-filters input[type="search"], .contract-list-filters input[type="text"], .contract-list-filters .filter-select, .contract-list-filters select { width: 100%; min-height: 44px; font-size: 16px; /* prevent iOS zoom */ } /* Action icons: touch-friendly */ .actions-col .btn-icon, .contract-table .btn-icon { min-width: 44px; min-height: 44px; padding: 10px; } /* Contract cards: better touch targets */ .contract-table tr.contract-row { padding: var(--spacing-md); min-height: 44px; } .contract-table td { min-height: 36px; } /* Filename: allow more space */ .contract-table .filename-text { max-width: calc(100vw - 100px); font-size: var(--font-size-sm); } } /* ─── 3. DASHBOARD — Pipeline stage cards wrap ─── */ @media (max-width: 480px) { .pipeline-stages-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xs); } .pipeline-stage-card { padding: var(--spacing-sm); } .stage-count { font-size: var(--font-size-lg); } .stage-name { font-size: 10px; } } /* ─── 3b. DASHBOARD — Calendar: bigger touch targets ─── */ @media (max-width: 768px) { .calendar-nav-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } .calendar-actions .btn { min-height: 44px; padding: 0.5rem 0.75rem; } .calendar-header { gap: var(--spacing-sm); } } /* ─── 3c. DASHBOARD — Action items: less aggressive truncation ─── */ @media (max-width: 640px) { .action-item-title { white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .action-item-subtitle { white-space: normal; overflow: visible; text-overflow: unset; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .action-item { min-height: 44px; } .action-item-arrow { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* ─── 3d. DASHBOARD — Recent contracts: better card layout ─── */ @media (max-width: 640px) { .recent-contracts-section .filename-text { max-width: calc(100vw - 120px); } .recent-contracts-section .contract-table .filename-text { max-width: calc(100vw - 100px); } } /* ─── Contract cards: all inline icon buttons need 44px tap targets ─── */ @media (max-width: 768px) { .contract-table tr.contract-row .btn-icon, .contract-table tr.contract-row button[class*="btn"], .contract-row .btn-icon, .btn-icon { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px; } /* Pencil rename icon: always visible on mobile */ .btn-rename-inline { opacity: 1; min-width: 44px; min-height: 44px; } } /* ─── Global: prevent any horizontal overflow on mobile ─── */ @media (max-width: 768px) { .contract-detail { max-width: 100vw; overflow-x: hidden; } .tab-content { max-width: 100%; overflow-x: hidden; word-break: break-word; } .extractions-view { max-width: 100%; overflow-x: hidden; } .extraction-group { max-width: 100%; overflow: hidden; } /* UAE law citations: prevent overflow */ .uae-law-citation { word-break: break-word; overflow-wrap: break-word; } .citation-source, .citation-text { word-break: break-word; } /* Risk cards: prevent overflow */ .risk-card .risk-clause blockquote { word-break: break-word; overflow-wrap: break-word; } } /* ─── Toast Notifications ─── */ .toast-notification { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); padding: 16px 24px; border-radius: 8px; display: flex; align-items: center; gap: 12px; z-index: 10000; animation: slideDown 0.3s ease-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); max-width: 90%; } .toast-success { background: #10b981; color: white; } .toast-error { background: #ef4444; color: white; } .toast-close { background: none; border: none; color: inherit; font-size: 20px; cursor: pointer; padding: 0 4px; opacity: 0.8; } .toast-close:hover { opacity: 1; } @keyframes slideDown { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }