Spaces:
Running
Running
| /* ========================================================================== | |
| AI Accident Analysis — Stylesheet | |
| Dark theme with police/forensic aesthetic, glassmorphism | |
| ========================================================================== */ | |
| /* ── CSS Variables ──────────────────────────────────────────────────── */ | |
| :root { | |
| /* Primary palette — clean white with dark blue accents */ | |
| --bg-primary: #f8fafc; | |
| --bg-secondary: #ffffff; | |
| --bg-tertiary: #f1f5f9; | |
| /* Dark Blue Panels */ | |
| --surface: rgba(255, 255, 255, 0.85); | |
| /* deeply saturated dark blue */ | |
| --surface-hover: rgba(240, 244, 248, 0.9); | |
| --glass: rgba(255, 255, 255, 0.75); | |
| /* translucent dark blue */ | |
| --glass-border: rgba(30, 58, 138, 0.15); | |
| /* Text on light backgrounds (Global) */ | |
| --text-primary: #0f172a; | |
| --text-secondary: #334155; | |
| --text-muted: #64748b; | |
| /* Accent */ | |
| --accent: #1e3a8a; | |
| /* deep dark blue */ | |
| --accent-hover: #172554; | |
| --accent-glow: rgba(30, 58, 138, 0.15); | |
| /* Severity colors */ | |
| --critical: #ef4444; | |
| --critical-bg: rgba(239, 68, 68, 0.12); | |
| --high: #f97316; | |
| --high-bg: rgba(249, 115, 22, 0.12); | |
| --medium: #eab308; | |
| --medium-bg: rgba(234, 179, 8, 0.12); | |
| --low: #22c55e; | |
| --low-bg: rgba(34, 197, 94, 0.12); | |
| /* Status */ | |
| --pending: #8b97b0; | |
| --analyzing: #3b82f6; | |
| --complete: #22c55e; | |
| --error: #ef4444; | |
| /* Layout */ | |
| --sidebar-width: 240px; | |
| --radius: 12px; | |
| --radius-sm: 8px; | |
| --radius-xs: 6px; | |
| /* Fonts */ | |
| --font-heading: 'Outfit', sans-serif; | |
| --font-body: 'Inter', sans-serif; | |
| /* Transitions */ | |
| --transition: 0.2s ease; | |
| --transition-slow: 0.4s ease; | |
| } | |
| /* ── Reset & Base ──────────────────────────────────────────────────── */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| font-family: var(--font-body); | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| background: var(--bg-primary); | |
| -webkit-font-smoothing: antialiased; | |
| overflow: hidden; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5 { | |
| font-family: var(--font-heading); | |
| font-weight: 600; | |
| } | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| font-family: var(--font-body); | |
| font-size: 0.9rem; | |
| } | |
| /* ── App Layout ────────────────────────────────────────────────────── */ | |
| .app-container { | |
| display: flex; | |
| height: 100vh; | |
| background: | |
| radial-gradient(ellipse at 20% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 60%), | |
| radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.04) 0%, transparent 50%), | |
| var(--bg-primary); | |
| } | |
| /* ── Sidebar ───────────────────────────────────────────────────────── */ | |
| .sidebar { | |
| width: var(--sidebar-width); | |
| min-width: var(--sidebar-width); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1.5rem 1rem; | |
| border-right: 1px solid var(--glass-border); | |
| background: var(--glass); | |
| backdrop-filter: blur(20px); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0 0.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .brand i { | |
| font-size: 1.5rem; | |
| color: var(--accent); | |
| text-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .brand h1 { | |
| font-size: 1.2rem; | |
| letter-spacing: -0.5px; | |
| background: linear-gradient(135deg, var(--text-primary), var(--accent)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .nav-menu { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.65rem 0.8rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-align: left; | |
| font-size: 0.88rem; | |
| } | |
| .nav-item:hover { | |
| background: var(--surface-hover); | |
| color: var(--text-primary); | |
| } | |
| .nav-item.active { | |
| background: var(--accent-glow); | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .nav-section-title { | |
| font-size: 0.65rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| margin: 1.2rem 0 0.4rem 0.8rem; | |
| } | |
| .nav-divider { | |
| height: 1px; | |
| background: var(--glass-border); | |
| margin: 0.5rem 0; | |
| } | |
| .status-panel { | |
| padding: 0.8rem; | |
| background: var(--surface); | |
| border-radius: var(--radius-sm); | |
| margin-top: auto; | |
| } | |
| .status-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.3rem 0; | |
| } | |
| .status-label { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-value { | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| font-weight: 500; | |
| } | |
| .disclaimer-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.6rem 0.8rem; | |
| margin-top: 0.8rem; | |
| background: var(--medium-bg); | |
| border: 1px solid rgba(234, 179, 8, 0.2); | |
| border-radius: var(--radius-xs); | |
| color: var(--medium); | |
| font-size: 0.72rem; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| /* ── Main Content ──────────────────────────────────────────────────── */ | |
| .main-content { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 1.5rem 2rem; | |
| position: relative; | |
| } | |
| .view { | |
| display: none; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .view.active { | |
| display: block; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .view-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .view-header h2 { | |
| font-size: 1.3rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| } | |
| .view-header h2 i { | |
| color: var(--accent); | |
| font-size: 1.1rem; | |
| } | |
| .header-actions { | |
| margin-left: auto; | |
| display: flex; | |
| gap: 0.6rem; | |
| } | |
| /* ── Buttons ───────────────────────────────────────────────────────── */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), var(--accent-hover)); | |
| color: white; | |
| border: none; | |
| padding: 0.6rem 1.2rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| font-weight: 500; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| transition: var(--transition); | |
| box-shadow: 0 2px 10px var(--accent-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 15px var(--accent-glow); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-secondary { | |
| background: var(--surface); | |
| color: var(--text-secondary); | |
| border: 1px solid var(--glass-border); | |
| padding: 0.6rem 1rem; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| transition: var(--transition); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--surface-hover); | |
| color: var(--text-primary); | |
| } | |
| .btn-secondary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .btn-large { | |
| padding: 0.8rem 2rem; | |
| font-size: 1rem; | |
| } | |
| .btn-back { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| padding: 0.4rem; | |
| transition: var(--transition); | |
| } | |
| .btn-back:hover { | |
| color: var(--accent); | |
| } | |
| /* ── Glass Panel ───────────────────────────────────────────────────── */ | |
| .glass { | |
| background: var(--glass); | |
| backdrop-filter: blur(20px); | |
| border: 2px solid var(--accent); | |
| /* thick dark blue border */ | |
| border-radius: var(--radius); | |
| } | |
| /* ── Cases Grid (Dashboard) ────────────────────────────────────────── */ | |
| .cases-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .case-card { | |
| background: var(--surface); | |
| border: 2px solid var(--accent); | |
| /* thick dark blue border */ | |
| border-radius: var(--radius); | |
| padding: 1.2rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .case-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--accent); | |
| opacity: 0; | |
| transition: var(--transition); | |
| } | |
| .case-card:hover { | |
| border-color: var(--accent); | |
| transform: translateY(-2px); | |
| } | |
| .case-card:hover::before { | |
| opacity: 1; | |
| } | |
| .case-card .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.6rem; | |
| } | |
| .case-card .case-number { | |
| font-weight: 600; | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| } | |
| .case-card .case-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| } | |
| .case-card .case-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| } | |
| .case-card .case-meta i { | |
| width: 14px; | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| } | |
| .case-card .card-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 0.8rem; | |
| padding-top: 0.8rem; | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| .case-card .photo-count { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| /* Status badge */ | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 999px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .status-badge.pending { | |
| background: rgba(139, 151, 176, 0.15); | |
| color: var(--pending); | |
| } | |
| .status-badge.analyzing { | |
| background: rgba(59, 130, 246, 0.15); | |
| color: var(--analyzing); | |
| } | |
| .status-badge.complete { | |
| background: rgba(34, 197, 94, 0.15); | |
| color: var(--complete); | |
| } | |
| .status-badge.error { | |
| background: rgba(239, 68, 68, 0.15); | |
| color: var(--error); | |
| } | |
| .status-badge i { | |
| font-size: 0.5rem; | |
| } | |
| /* ── Empty State ───────────────────────────────────────────────────── */ | |
| .empty-state { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| } | |
| .empty-state i { | |
| font-size: 3rem; | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| opacity: 0.4; | |
| } | |
| .empty-state h3 { | |
| font-size: 1.2rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .empty-state p { | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| /* ── New Case Form ─────────────────────────────────────────────────── */ | |
| .form-container { | |
| padding: 1.5rem; | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.3rem; | |
| } | |
| .form-group.full-width { | |
| grid-column: 1 / -1; | |
| } | |
| .form-group label { | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .form-group input, | |
| .form-group textarea, | |
| .form-group select { | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-xs); | |
| padding: 0.6rem 0.8rem; | |
| color: var(--text-primary); | |
| /* explicitly dark text for white inputs */ | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-glow); | |
| } | |
| .form-group textarea { | |
| resize: vertical; | |
| } | |
| .form-actions { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 1rem; | |
| } | |
| /* ── Drop Zone ─────────────────────────────────────────────────────── */ | |
| .drop-zone { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2.5rem 1.5rem; | |
| border: 2px dashed var(--glass-border); | |
| border-radius: var(--radius); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-align: center; | |
| } | |
| .drop-zone:hover, | |
| .drop-zone.drag-over { | |
| border-color: var(--accent); | |
| background: var(--accent-glow); | |
| } | |
| .drop-zone i { | |
| font-size: 2.2rem; | |
| color: var(--accent); | |
| margin-bottom: 0.8rem; | |
| opacity: 0.7; | |
| } | |
| .drop-zone p { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| margin-bottom: 0.3rem; | |
| } | |
| .drop-zone .sub-text { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| /* ── Photo Preview ─────────────────────────────────────────────────── */ | |
| .photo-preview { | |
| margin-top: 1rem; | |
| } | |
| .photo-thumbnails { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .photo-thumbnail { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: var(--radius-xs); | |
| overflow: hidden; | |
| border: 2px solid var(--glass-border); | |
| } | |
| .photo-thumbnail img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .photo-count { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| } | |
| /* ── Progress ──────────────────────────────────────────────────────── */ | |
| .progress-section { | |
| margin-top: 1rem; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 6px; | |
| background: var(--bg-secondary); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| margin-bottom: 0.5rem; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent), #818cf8); | |
| border-radius: 999px; | |
| width: 0%; | |
| transition: width 0.5s ease; | |
| } | |
| #upload-status-text { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| } | |
| /* ── Case Detail ───────────────────────────────────────────────────── */ | |
| .case-info-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.8rem; | |
| padding: 0.8rem 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .info-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| padding: 0.3rem 0.7rem; | |
| background: var(--surface); | |
| border-radius: 999px; | |
| } | |
| .info-chip i { | |
| color: var(--accent); | |
| font-size: 0.75rem; | |
| } | |
| .status-chip.pending i { | |
| color: var(--pending); | |
| } | |
| .status-chip.analyzing i { | |
| color: var(--analyzing); | |
| } | |
| .status-chip.complete i { | |
| color: var(--complete); | |
| } | |
| .status-chip.error i { | |
| color: var(--error); | |
| } | |
| /* ── Analysis Grid ─────────────────────────────────────────────────── */ | |
| .analysis-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .panel { | |
| padding: 1rem; | |
| min-height: 200px; | |
| max-height: 500px; | |
| overflow-y: auto; | |
| } | |
| .panel-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.8rem; | |
| padding-bottom: 0.6rem; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .panel-header h3 { | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| .panel-header h3 i { | |
| color: var(--accent); | |
| font-size: 0.85rem; | |
| } | |
| .badge { | |
| background: var(--surface); | |
| color: var(--text-secondary); | |
| padding: 0.15rem 0.5rem; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| } | |
| .badge.danger { | |
| background: var(--critical-bg); | |
| color: var(--critical); | |
| } | |
| .placeholder-text { | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| font-style: italic; | |
| } | |
| /* ── Detail Photos Grid ────────────────────────────────────────────── */ | |
| .detail-photos-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |
| gap: 0.5rem; | |
| } | |
| .detail-photo { | |
| aspect-ratio: 4/3; | |
| border-radius: var(--radius-xs); | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| transition: var(--transition); | |
| } | |
| .detail-photo:hover { | |
| border-color: var(--accent); | |
| transform: scale(1.02); | |
| } | |
| .detail-photo img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| /* ── Analysis Content ──────────────────────────────────────────────── */ | |
| .analysis-content { | |
| font-size: 0.85rem; | |
| line-height: 1.7; | |
| color: var(--text-secondary); | |
| } | |
| .analysis-content pre { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| font-family: var(--font-body); | |
| } | |
| .analysis-photo-section { | |
| margin-bottom: 1rem; | |
| } | |
| .analysis-photo-label { | |
| font-weight: 600; | |
| color: var(--accent); | |
| margin-bottom: 0.3rem; | |
| font-size: 0.82rem; | |
| } | |
| /* ── Violations List ───────────────────────────────────────────────── */ | |
| .violation-card { | |
| background: var(--surface); | |
| border: 2px solid var(--accent); | |
| /* thick dark blue border */ | |
| border-radius: var(--radius-sm); | |
| padding: 0.8rem; | |
| margin-bottom: 0.5rem; | |
| border-left: 6px solid var(--text-muted); | |
| transition: var(--transition); | |
| } | |
| .violation-card:hover { | |
| background: var(--surface-hover); | |
| } | |
| .violation-card.CRITICAL { | |
| border-left-color: var(--critical); | |
| } | |
| .violation-card.HIGH { | |
| border-left-color: var(--high); | |
| } | |
| .violation-card.MEDIUM { | |
| border-left-color: var(--medium); | |
| } | |
| .violation-card.LOW { | |
| border-left-color: var(--low); | |
| } | |
| .violation-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.3rem; | |
| } | |
| .violation-title { | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| color: var(--text-primary); | |
| } | |
| .severity-tag { | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| padding: 0.15rem 0.5rem; | |
| border-radius: 999px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .severity-tag.CRITICAL { | |
| background: var(--critical-bg); | |
| color: var(--critical); | |
| } | |
| .severity-tag.HIGH { | |
| background: var(--high-bg); | |
| color: var(--high); | |
| } | |
| .severity-tag.MEDIUM { | |
| background: var(--medium-bg); | |
| color: var(--medium); | |
| } | |
| .severity-tag.LOW { | |
| background: var(--low-bg); | |
| color: var(--low); | |
| } | |
| .violation-meta { | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .violation-meta span { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.3rem; | |
| } | |
| .violation-evidence { | |
| font-size: 0.78rem; | |
| color: var(--text-secondary); | |
| margin-top: 0.3rem; | |
| font-style: italic; | |
| } | |
| /* ── Fault Content ─────────────────────────────────────────────────── */ | |
| .fault-content { | |
| font-size: 0.85rem; | |
| } | |
| .fault-party-bars { | |
| margin-bottom: 1rem; | |
| } | |
| .party-bar { | |
| margin-bottom: 0.6rem; | |
| } | |
| .party-bar-label { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.25rem; | |
| font-size: 0.82rem; | |
| } | |
| .party-bar-label .party-name { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| .party-bar-label .party-pct { | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .party-bar-track { | |
| height: 8px; | |
| background: var(--bg-secondary); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .party-bar-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| transition: width 1s ease; | |
| } | |
| .party-bar-fill.primary { | |
| background: linear-gradient(90deg, var(--critical), var(--high)); | |
| } | |
| .party-bar-fill.secondary { | |
| background: linear-gradient(90deg, var(--medium), var(--low)); | |
| } | |
| .fault-cause { | |
| background: var(--surface); | |
| border-radius: var(--radius-sm); | |
| padding: 0.8rem; | |
| margin-top: 0.8rem; | |
| } | |
| .fault-cause h4 { | |
| font-size: 0.82rem; | |
| color: var(--accent); | |
| margin-bottom: 0.4rem; | |
| } | |
| .fault-cause p { | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .confidence-meter { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-top: 0.8rem; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .confidence-meter .meter-bar { | |
| flex: 1; | |
| height: 4px; | |
| background: var(--bg-secondary); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .confidence-meter .meter-fill { | |
| height: 100%; | |
| background: var(--accent); | |
| border-radius: 999px; | |
| } | |
| /* ── Analysis Overlay ──────────────────────────────────────────────── */ | |
| .analysis-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(10, 14, 26, 0.85); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 100; | |
| backdrop-filter: blur(5px); | |
| } | |
| .analysis-overlay.hidden { | |
| display: none; | |
| } | |
| .overlay-content { | |
| text-align: center; | |
| padding: 2.5rem 3rem; | |
| border-radius: var(--radius); | |
| } | |
| .overlay-content h3 { | |
| margin: 1rem 0 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| .overlay-content p { | |
| color: var(--text-secondary); | |
| font-size: 0.88rem; | |
| } | |
| /* ── Spinner ───────────────────────────────────────────────────────── */ | |
| .spinner-large { | |
| width: 48px; | |
| height: 48px; | |
| border: 4px solid var(--glass-border); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| margin: 0 auto; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* ── Report Content ────────────────────────────────────────────────── */ | |
| .report-content { | |
| padding: 2rem; | |
| max-width: 900px; | |
| margin: 0 auto; | |
| line-height: 1.8; | |
| } | |
| .report-content h3 { | |
| font-size: 1.1rem; | |
| color: var(--accent); | |
| margin: 1.5rem 0 0.5rem; | |
| padding-bottom: 0.3rem; | |
| border-bottom: 1px solid var(--glass-border); | |
| } | |
| .report-content h4 { | |
| font-size: 0.95rem; | |
| color: var(--text-primary); | |
| margin: 1rem 0 0.3rem; | |
| } | |
| .report-content p { | |
| font-size: 0.88rem; | |
| color: var(--text-secondary); | |
| margin-bottom: 0.5rem; | |
| } | |
| .report-header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| padding-bottom: 1.5rem; | |
| border-bottom: 2px solid var(--accent); | |
| } | |
| .report-header h2 { | |
| font-size: 1.4rem; | |
| margin-bottom: 0.3rem; | |
| } | |
| .report-header .report-subtitle { | |
| color: var(--text-muted); | |
| font-size: 0.88rem; | |
| } | |
| .report-disclaimer { | |
| background: var(--medium-bg); | |
| border: 1px solid rgba(234, 179, 8, 0.2); | |
| border-radius: var(--radius-sm); | |
| padding: 0.8rem 1rem; | |
| font-size: 0.78rem; | |
| color: var(--medium); | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| } | |
| .report-stat-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.8rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .report-stat { | |
| text-align: center; | |
| background: var(--surface); | |
| border-radius: var(--radius-sm); | |
| padding: 0.8rem; | |
| } | |
| .report-stat .stat-number { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--accent); | |
| } | |
| .report-stat .stat-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* ── Rules View ────────────────────────────────────────────────────── */ | |
| .rules-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .rule-category { | |
| margin-bottom: 1.5rem; | |
| } | |
| .rule-category-header { | |
| font-size: 1rem; | |
| color: var(--text-primary); | |
| padding: 0.6rem 1rem; | |
| background: var(--surface); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .rule-category-header:hover { | |
| background: var(--surface-hover); | |
| } | |
| .rule-category-header .rule-count { | |
| margin-left: auto; | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| } | |
| .rule-list { | |
| padding-left: 0.5rem; | |
| } | |
| .rule-item { | |
| padding: 0.4rem 0.8rem; | |
| margin-bottom: 0.25rem; | |
| font-size: 0.82rem; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .rule-item .rule-id { | |
| color: var(--text-muted); | |
| font-family: monospace; | |
| font-size: 0.75rem; | |
| min-width: 90px; | |
| } | |
| /* ── Toast ─────────────────────────────────────────────────────────── */ | |
| #toast-container { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .toast { | |
| padding: 0.7rem 1.2rem; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.85rem; | |
| animation: slideIn 0.3s ease, fadeOut 0.5s ease 3.5s forwards; | |
| max-width: 350px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .toast.success { | |
| background: rgba(34, 197, 94, 0.9); | |
| color: white; | |
| } | |
| .toast.error { | |
| background: rgba(239, 68, 68, 0.9); | |
| color: white; | |
| } | |
| .toast.info { | |
| background: rgba(59, 130, 246, 0.9); | |
| color: white; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateX(100%); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadeOut { | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| /* ── Responsive ────────────────────────────────────────────────────── */ | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| display: none; | |
| } | |
| .main-content { | |
| padding: 1rem; | |
| } | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .analysis-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .case-info-bar { | |
| flex-direction: column; | |
| } | |
| .report-stat-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* ── Scrollbar ─────────────────────────────────────────────────────── */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--glass-border); | |
| border-radius: 999px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* ── Modals ────────────────────────────────────────────────────────── */ | |
| .modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.6); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| backdrop-filter: blur(4px); | |
| transition: opacity 0.3s ease; | |
| } | |
| .modal.hidden { | |
| display: none; | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .modal-content { | |
| width: 90%; | |
| max-width: 600px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| padding: 2rem; | |
| position: relative; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-header h2 { | |
| font-size: 1.3rem; | |
| margin: 0; | |
| } | |
| .btn-close { | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.8rem; | |
| cursor: pointer; | |
| line-height: 1; | |
| } | |
| .modal-footer { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| padding-top: 1rem; | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| /* ── UI Enhancements ──────────────────────────────────────────────── */ | |
| .panel-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| } | |
| .btn-icon-sm { | |
| background: var(--surface); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-secondary); | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 999px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-icon-sm:hover { | |
| color: var(--accent); | |
| border-color: var(--accent); | |
| background: var(--accent-glow); | |
| } | |
| /* Delete Icon in Card */ | |
| .btn-delete-card { | |
| position: absolute; | |
| top: 0.8rem; | |
| right: 0.8rem; | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--critical); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| z-index: 10; | |
| opacity: 0.4; | |
| } | |
| .case-card:hover .btn-delete-card { | |
| opacity: 1; | |
| } | |
| .btn-delete-card:hover { | |
| background: var(--critical); | |
| color: white; | |
| border-color: var(--critical); | |
| } | |
| /* ── Landing Page ─────────────────────────────────────────────────── */ | |
| #view-landing { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| padding: 2rem 1rem; | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .landing-hero { | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| } | |
| .landing-title { | |
| font-size: 4.5rem; | |
| font-weight: 800; | |
| color: var(--accent); | |
| margin-bottom: 1rem; | |
| letter-spacing: -1px; | |
| background: linear-gradient(135deg, var(--accent) 0%, #3b82f6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .landing-subtitle { | |
| font-size: 1.6rem; | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.3; | |
| } | |
| .landing-description { | |
| font-size: 1.15rem; | |
| color: var(--text-secondary); | |
| max-width: 800px; | |
| margin: 0 auto; | |
| line-height: 1.6; | |
| } | |
| .landing-use-cases { | |
| width: 100%; | |
| } | |
| .use-cases-title { | |
| font-size: 1.8rem; | |
| color: var(--text-primary); | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| font-weight: 700; | |
| } | |
| /* ── Modern Accordion ─────────────────────────────────────────────── */ | |
| .accordion-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .accordion-item { | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| transition: box-shadow 0.3s ease, border-color 0.3s ease; | |
| } | |
| .accordion-item:hover { | |
| box-shadow: 0 4px 20px var(--accent-glow); | |
| border-color: var(--accent); | |
| } | |
| .accordion-header { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.2rem 1.5rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: color 0.3s ease; | |
| } | |
| .accordion-header i:first-child { | |
| margin-right: 0.8rem; | |
| color: var(--accent); | |
| width: 24px; | |
| text-align: center; | |
| } | |
| .accordion-icon { | |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| } | |
| .accordion-header:hover { | |
| color: var(--accent); | |
| } | |
| /* Modern smooth height transition using Grid */ | |
| .accordion-body { | |
| display: grid; | |
| grid-template-rows: 0fr; | |
| transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| background: rgba(255, 255, 255, 0.4); | |
| } | |
| .accordion-content { | |
| overflow: hidden; | |
| } | |
| .accordion-content p { | |
| padding: 0 1.5rem 1.2rem 3.5rem; | |
| margin: 0; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .accordion-content p strong { | |
| color: var(--text-primary); | |
| } | |
| .accordion-content p:first-child { | |
| padding-top: 0.5rem; | |
| } | |
| /* Active State */ | |
| .accordion-item.active .accordion-body { | |
| grid-template-rows: 1fr; | |
| } | |
| .accordion-item.active .accordion-icon { | |
| transform: rotate(180deg); | |
| color: var(--accent); | |
| } | |
| .accordion-item.active .accordion-header { | |
| color: var(--accent); | |
| } | |
| /* ── Sidebar Collapsible Widgets ──────────────────────────────────── */ | |
| .sidebar-collapsible { | |
| margin-bottom: 0.4rem; | |
| } | |
| .sidebar-collapse-btn { | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0.55rem 0.8rem; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| border-radius: var(--radius-sm); | |
| transition: var(--transition); | |
| text-align: left; | |
| } | |
| .sidebar-collapse-btn span { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| } | |
| .sidebar-collapse-btn span i { | |
| color: var(--accent); | |
| font-size: 0.85rem; | |
| width: 16px; | |
| text-align: center; | |
| } | |
| .sidebar-collapse-btn:hover { | |
| background: var(--surface-hover); | |
| color: var(--text-primary); | |
| } | |
| .sidebar-collapse-icon { | |
| font-size: 0.65rem; | |
| color: var(--text-muted); | |
| transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .sidebar-collapsible.open .sidebar-collapse-icon { | |
| transform: rotate(180deg); | |
| color: var(--accent); | |
| } | |
| .sidebar-collapsible.open .sidebar-collapse-btn { | |
| color: var(--accent); | |
| background: var(--accent-glow); | |
| } | |
| /* Smooth height animation via CSS Grid */ | |
| .sidebar-collapse-body { | |
| display: grid; | |
| grid-template-rows: 0fr; | |
| transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .sidebar-collapsible.open .sidebar-collapse-body { | |
| grid-template-rows: 1fr; | |
| } | |
| .sidebar-collapse-content { | |
| overflow: hidden; | |
| padding: 0 0.8rem; | |
| } | |
| .sidebar-collapsible.open .sidebar-collapse-content { | |
| padding: 0.4rem 0.8rem 0.6rem; | |
| } | |
| /* Founder details in sidebar */ | |
| .sidebar-founder-role { | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| line-height: 1.5; | |
| margin-bottom: 0.5rem; | |
| } | |
| .sidebar-linkedin { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| padding: 0.3rem 0.7rem; | |
| background: #0a66c2; | |
| color: #ffffff; | |
| border-radius: var(--radius-xs); | |
| text-decoration: none; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .sidebar-linkedin:hover { | |
| background: #004182; | |
| transform: translateY(-1px); | |
| } | |
| .sidebar-linkedin i { | |
| font-size: 0.85rem; | |
| } | |
| /* Contact details in sidebar */ | |
| .sidebar-contact-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| color: var(--accent); | |
| text-decoration: none; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| margin-bottom: 0.4rem; | |
| transition: var(--transition); | |
| } | |
| .sidebar-contact-link:hover { | |
| color: var(--accent-hover); | |
| } | |
| .sidebar-contact-link i, | |
| .sidebar-contact-phone i { | |
| color: var(--accent); | |
| font-size: 0.78rem; | |
| width: 14px; | |
| text-align: center; | |
| } | |
| .sidebar-contact-phone { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| color: var(--text-muted); | |
| font-size: 0.75rem; | |
| font-style: italic; | |
| } |