/* ═══════════════════════════════════════════════ GitDash — Design System ═══════════════════════════════════════════════ */ :root { --bg: #FFFFFF; --bg2: #EFF6FF; --bg3: #DBEAFE; --surface: rgba(37,99,235,0.06); --surface-hover: rgba(37,99,235,0.10); --border: rgba(0,0,0,0.10); --border-hover: rgba(0,0,0,0.20); --text: #0F172A; --text2: #475569; --text3: #94A3B8; --purple: #2563EB; --blue: #3B82F6; --pink: #EC4899; --green: #10B981; --amber: #F59E0B; --red: #EF4444; --grad: linear-gradient(135deg, #1E40AF, #2563EB); --grad-hero: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #60A5FA 100%); --glow: 0 0 40px rgba(37,99,235,0.25); --glass: rgba(255,255,255,0.80); --topbar-bg: rgba(255,255,255,0.92); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --sidebar-w: 220px; --topbar-h: 64px; } /* ═══════════════════════════════════════════════ User-selectable themes — override design tokens. Applied via data-theme on ; persisted in localStorage. Light themes inherit white --bg / dark --text from :root and only retint accents. ═══════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0B1220; --bg2: #131C2E; --bg3: #1E2A40; --surface: rgba(255,255,255,0.05); --surface-hover: rgba(255,255,255,0.10); --border: rgba(255,255,255,0.12); --border-hover: rgba(255,255,255,0.24); --text: #F1F5F9; --text2: #CBD5E1; --text3: #8595AD; --purple: #60A5FA; --blue: #3B82F6; --grad: linear-gradient(135deg, #2563EB, #3B82F6); --grad-hero: linear-gradient(135deg, #1D4ED8, #3B82F6, #60A5FA); --glass: rgba(19,28,46,0.94); --topbar-bg: rgba(11,18,32,0.92); } [data-theme="emerald"] { --bg2: #ECFDF5; --bg3: #D1FAE5; --surface: rgba(16,185,129,0.07); --surface-hover: rgba(16,185,129,0.12); --purple: #059669; --blue: #10B981; --grad: linear-gradient(135deg, #047857, #10B981); --grad-hero: linear-gradient(135deg, #065F46, #10B981, #34D399); } [data-theme="violet"] { --bg2: #F5F3FF; --bg3: #EDE9FE; --surface: rgba(139,92,246,0.07); --surface-hover: rgba(139,92,246,0.12); --purple: #7C3AED; --blue: #8B5CF6; --grad: linear-gradient(135deg, #6D28D9, #8B5CF6); --grad-hero: linear-gradient(135deg, #5B21B6, #8B5CF6, #A78BFA); } [data-theme="rose"] { --bg2: #FFF1F2; --bg3: #FFE4E6; --surface: rgba(244,63,94,0.07); --surface-hover: rgba(244,63,94,0.12); --purple: #E11D48; --blue: #F43F5E; --grad: linear-gradient(135deg, #BE123C, #F43F5E); --grad-hero: linear-gradient(135deg, #9F1239, #F43F5E, #FB7185); } [data-theme="amber"] { --bg2: #FFFBEB; --bg3: #FEF3C7; --surface: rgba(245,158,11,0.08); --surface-hover: rgba(245,158,11,0.14); --purple: #D97706; --blue: #F59E0B; --grad: linear-gradient(135deg, #B45309, #F59E0B); --grad-hero: linear-gradient(135deg, #92400E, #F59E0B, #FBBF24); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; } input, select, textarea { font-family: inherit; } img { max-width: 100%; } ul { list-style: none; } code { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; background: rgba(37,99,235,0.15); color: #1D4ED8; padding: 2px 6px; border-radius: 4px; } /* ── Utilities ── */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .glass { background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border); } .gradient-text { background: var(--grad-hero); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--r-md); font-weight: 600; font-size: 0.9rem; transition: all 0.2s; white-space: nowrap; } .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 4px 24px rgba(37,99,235,0.35); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(37,99,235,0.5); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text2); } .btn-ghost:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-hover); } .btn-secondary { background: var(--surface-hover); border: 1px solid var(--border); color: var(--text2); } .btn-secondary:hover { background: var(--surface); color: var(--text); } .btn-danger { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: var(--red); } .btn-danger:hover { background: rgba(239,68,68,0.25); } .btn-sm { padding: 7px 14px; font-size: 0.8rem; gap: 6px; } .btn-lg { padding: 14px 28px; font-size: 1rem; } /* ══════════════════════════════════════ LANDING PAGE ══════════════════════════════════════ */ /* Navbar */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px 0; transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; } .navbar.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: var(--border); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 32px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; color: var(--text); flex-shrink: 0; } .nav-links { display: flex; gap: 32px; margin-left: auto; } .nav-links a { color: var(--text2); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--text); } .nav-actions { margin-left: 16px; } .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; padding: 4px; margin-left: auto; } .nav-hamburger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s; } /* Hero */ .hero { min-height: 100vh; padding: 140px 0 80px; position: relative; overflow: hidden; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; overflow: hidden; } .orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; animation: orbFloat 12s ease-in-out infinite; } .orb-1 { width: 600px; height: 600px; top: -200px; left: -150px; background: radial-gradient(circle, rgba(37,99,235,0.2) 0%, transparent 70%); animation-delay: 0s; } .orb-2 { width: 500px; height: 500px; top: 20%; right: -100px; background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%); animation-delay: -4s; } .orb-3 { width: 400px; height: 400px; bottom: -100px; left: 40%; background: radial-gradient(circle, rgba(236,72,153,0.12) 0%, transparent 70%); animation-delay: -8s; } @keyframes orbFloat { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,30px) scale(0.95); } } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); opacity: 0.3; } .hero-content { position: relative; z-index: 1; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.3); color: #1D4ED8; padding: 6px 14px; border-radius: 100px; font-size: 0.8rem; font-weight: 500; margin-bottom: 24px; } .badge-dot { width: 6px; height: 6px; background: var(--purple); border-radius: 50%; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.4); } } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.02em; } .hero-description { font-size: 1.15rem; color: var(--text2); max-width: 560px; line-height: 1.7; margin-bottom: 36px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; } .hero-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; } .hero-card { border-radius: var(--r-lg); padding: 16px; transition: transform 0.3s; position: relative; overflow: hidden; } .hero-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grad); opacity: 0; transition: opacity 0.3s; } .hero-card.active::before { opacity: 0.06; } @keyframes float1 { 0%,100% {transform:translateY(0px);} 50% {transform:translateY(-8px);} } @keyframes float2 { 0%,100% {transform:translateY(0px);} 50% {transform:translateY(-12px);} } @keyframes float3 { 0%,100% {transform:translateY(0px);} 50% {transform:translateY(-6px);} } @keyframes float4 { 0%,100% {transform:translateY(0px);} 50% {transform:translateY(-10px);} } .float-1 { animation: float1 5s ease-in-out infinite; } .float-2 { animation: float2 6s ease-in-out infinite 0.5s; } .float-3 { animation: float3 4.5s ease-in-out infinite 1s; } .float-4 { animation: float4 5.5s ease-in-out infinite 1.5s; } .hc-header { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--text2); margin-bottom: 8px; } .hc-dot { width: 7px; height: 7px; border-radius: 50%; } .hc-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); } .hc-dot.purple { background: var(--purple); box-shadow: 0 0 6px var(--purple); } .hc-dot.blue { background: var(--blue); box-shadow: 0 0 6px var(--blue); } .hc-dot.pink { background: var(--pink); box-shadow: 0 0 6px var(--pink); } .hc-value { font-size: 1.8rem; font-weight: 800; line-height: 1; margin-bottom: 8px; } .hc-bar { height: 4px; background: var(--bg3); border-radius: 2px; margin-bottom: 6px; } .hc-fill { height: 100%; background: var(--grad); border-radius: 2px; } .hc-sub { font-size: 0.7rem; color: var(--green); } .avatar-stack { display: flex; margin-top: 8px; } .av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; border: 2px solid var(--bg); margin-right: -8px; } .av.more { background: var(--bg3); color: var(--text2); border-color: var(--border); } .hc-radar { display: flex; justify-content: center; } .hc-avatars {} /* Trust Banner */ .trust-banner { padding: 40px 0; border-top: 1px solid var(--border); } .trust-label { text-align: center; color: var(--text3); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; } .trust-logos { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .trust-logo { display: flex; align-items: center; gap: 8px; color: var(--text3); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; } .trust-logo:hover { color: var(--text2); } /* Stats Strip */ .stats-strip { padding: 60px 0; border-top: 1px solid var(--border); } .stats-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .strip-stat { text-align: center; } .strip-num { font-size: 2.5rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .strip-label { font-size: 0.85rem; color: var(--text2); margin-top: 4px; } /* Features */ .features { padding: 100px 0; } .section-header { text-align: center; margin-bottom: 60px; } .section-badge { display: inline-block; background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.3); color: #1D4ED8; padding: 4px 14px; border-radius: 100px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; } .section-title { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .section-desc { color: var(--text2); font-size: 1rem; max-width: 540px; margin: 0 auto; } .features-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; gap: 20px; } .feat-card { border-radius: var(--r-xl); padding: 28px; transition: transform 0.3s, border-color 0.3s; position: relative; overflow: hidden; } .feat-card:hover { transform: translateY(-4px); border-color: var(--border-hover); } .feat-lg { grid-column: 1 / 2; grid-row: 1 / 2; } .feat-wide { grid-column: 2 / 4; } .feat-icon { margin-bottom: 16px; } .feat-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; } .feat-card p { font-size: 0.85rem; color: var(--text2); line-height: 1.6; margin-bottom: 16px; } .activity-bars { display: flex; align-items: flex-end; gap: 5px; height: 60px; margin-top: 16px; } .bar { flex: 1; background: rgba(37,99,235,0.25); border-radius: 4px 4px 0 0; transition: height 0.3s; } .bar.active { background: var(--purple); box-shadow: 0 0 12px rgba(37,99,235,0.6); } .quality-meter { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; } .qm-score { text-align: center; } .qm-value { font-size: 2rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .qm-label { font-size: 0.7rem; color: var(--text3); } .qm-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; } .qm-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text3); } .qm-row span { width: 56px; } .qm-track { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; } .qm-fill { height: 100%; border-radius: 3px; transition: width 1s; } .mini-leaderboard { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .lb-row { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; } .lb-rank { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .lb-rank.gold { background: rgba(245,158,11,0.2); color: var(--amber); } .lb-rank.silver { background: rgba(148,163,184,0.2); color: var(--text2); } .lb-rank.bronze { background: rgba(180,120,60,0.2); color: #CD7F32; } .lb-av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: #fff; flex-shrink: 0; } .lb-row span:nth-child(3) { flex: 1; } .lb-score { font-weight: 700; color: var(--purple); } .heatmap-preview { overflow: hidden; margin-top: 12px; } .hm-row { display: flex; gap: 4px; flex-wrap: wrap; } .hm-cell { width: 16px; height: 16px; border-radius: 3px; } .donut-preview { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 0.75rem; color: var(--text2); } .donut-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .export-preview { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ep-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text2); background: var(--bg3); border-radius: var(--r-sm); padding: 8px 12px; } /* Metrics */ .metrics-section { padding: 100px 0; background: var(--bg2); } .metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .metric-item { padding: 24px; } .metric-icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 14px; } .metric-item h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; } .metric-item p { font-size: 0.84rem; color: var(--text2); line-height: 1.6; } /* How it Works */ .how-it-works { padding: 100px 0; } .steps-grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 16px; margin-top: 40px; } .step-card { border-radius: var(--r-xl); padding: 32px; position: relative; } .step-num { font-size: 3rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 16px; } .step-icon { margin-bottom: 16px; color: var(--text2); } .step-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; } .step-card p { font-size: 0.84rem; color: var(--text2); line-height: 1.6; } .step-connector { font-size: 1.5rem; color: var(--text3); padding-top: 60px; } /* CTA */ .cta-section { padding: 80px 0 100px; } .cta-card { border-radius: var(--r-xl); padding: 64px; text-align: center; position: relative; overflow: hidden; } .cta-orb { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 70%); pointer-events: none; } .cta-card h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 16px; position: relative; } .cta-card p { color: var(--text2); margin-bottom: 32px; position: relative; } .cta-card .btn { position: relative; } /* Footer */ .footer { padding: 60px 0 32px; border-top: 1px solid var(--border); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-brand p { color: var(--text2); font-size: 0.85rem; margin-top: 12px; max-width: 260px; line-height: 1.6; } .footer-links h4 { font-size: 0.85rem; font-weight: 600; margin-bottom: 16px; color: var(--text); } .footer-links ul { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 0.84rem; color: var(--text2); transition: color 0.2s; } .footer-links a:hover { color: var(--text); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; } .footer-bottom p { color: var(--text3); font-size: 0.8rem; text-align: center; } /* ══════════════════════════════════════ DASHBOARD ══════════════════════════════════════ */ .dash-body { background: var(--bg); display: flex; height: 100vh; overflow: hidden; } /* Sidebar */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; height: 100vh; background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 50; transition: transform 0.3s; } .sidebar-logo { padding: 20px; display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; border-bottom: 1px solid var(--border); } .sidebar-nav { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .sidebar-bottom { padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; } /* Sidebar — Team presence + direct chat */ .sidebar-people { padding: 8px 12px 12px; border-top: 1px solid var(--border); flex-shrink: 0; } .sidebar-people-heading { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text3); padding: 4px 4px 6px 8px; } .sidebar-people-chat-btn { background: none; border: none; color: var(--text3); cursor: pointer; padding: 3px; border-radius: var(--r-sm); display: flex; transition: color 0.15s, background 0.15s; } .sidebar-people-chat-btn:hover { background: var(--surface-hover); color: var(--purple); } .sidebar-people-list { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .person-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; background: none; border: none; width: 100%; text-align: left; color: var(--text2); font-size: 0.82rem; font-family: inherit; transition: background 0.15s; } .person-row:hover { background: var(--surface-hover); color: var(--text); } .person-presence-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text3); } .person-presence-dot.is-online { background: var(--green); } .person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .person-unread-badge { background: var(--red); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 4px; flex-shrink: 0; } /* Task modal — auto-save status */ .task-save-status { font-size: 0.78rem; font-weight: 500; color: var(--text3); } .task-save-status.saving { color: var(--text3); } .task-save-status.unsaved { color: var(--text3); } .task-save-status.error { color: var(--red); font-weight: 600; } /* ══════════════════════════════════════════════════════════ Direct chat — WhatsApp-style window (thread list + conversation) Fixed palette rather than the app's theme variables, deliberately — the point is to look like WhatsApp regardless of which of the app's six colour themes is active. Only light/dark switches the palette, via the --wa-* custom properties overridden below for [data-theme="dark"]. ══════════════════════════════════════════════════════════ */ .wa-window { --wa-bg: #FFFFFF; --wa-panel: #F0F2F5; --wa-border: #E9EDEF; --wa-text: #111B21; --wa-text-dim: #667781; --wa-placeholder: #8696A0; --wa-hover: #F5F6F6; --wa-wallpaper: #EFEAE2; --wa-bubble-theirs: #FFFFFF; --wa-bubble-mine: #D9FDD3; --wa-accent: #00A884; --wa-accent-hover: #06976e; --wa-unread: #25D366; --wa-tick-read: #53BDEB; background: var(--wa-bg); border: 1px solid var(--wa-border); color: var(--wa-text); } /* Compound selector so these win over .modal's own width/flex-direction/ max-height regardless of stylesheet order (equal specificity would otherwise let whichever rule is declared later in the file win). */ .modal.wa-window { width: 900px; max-width: 92vw; height: min(620px, 86vh); max-height: min(620px, 86vh); padding: 0; overflow: hidden; flex-direction: row; } [data-theme="dark"] .wa-window { --wa-bg: #111B21; --wa-panel: #202C33; --wa-border: #2A3942; --wa-text: #E9EDEF; --wa-text-dim: #8696A0; --wa-placeholder: #8696A0; --wa-hover: #182229; --wa-wallpaper: #0B141A; --wa-bubble-theirs: #202C33; --wa-bubble-mine: #005C4B; } .wa-sidebar { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--wa-border); } .wa-sidebar-header { padding: 14px 16px; background: var(--wa-panel); font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--wa-border); flex-shrink: 0; } .wa-sidebar-header .modal-close { color: var(--wa-text-dim); } .wa-search-wrap { display: flex; align-items: center; gap: 8px; margin: 10px 12px; padding: 7px 12px; background: var(--wa-panel); border-radius: 999px; color: var(--wa-text-dim); flex-shrink: 0; } .wa-search-input { border: none; background: none; outline: none; font-size: 0.85rem; flex: 1; color: var(--wa-text); font-family: inherit; } .wa-search-input::placeholder { color: var(--wa-placeholder); } .wa-thread-list { flex: 1; overflow-y: auto; } .wa-thread-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--wa-border); transition: background 0.1s; } .wa-thread-row:hover { background: var(--wa-hover); } .wa-thread-row.active { background: var(--wa-panel); } .wa-thread-info { flex: 1; min-width: 0; } .wa-thread-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wa-thread-name { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-thread-time { font-size: 0.68rem; color: var(--wa-text-dim); flex-shrink: 0; } .wa-thread-bottom-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; gap: 8px; } .wa-thread-preview { font-size: 0.78rem; color: var(--wa-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-thread-unread-badge { background: var(--wa-unread); color: #fff; font-size: 0.65rem; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; } .wa-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; position: relative; } .wa-avatar-dot { position: absolute; bottom: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--wa-text-dim); border: 2px solid var(--wa-bg); } .wa-avatar-dot.is-online { background: var(--wa-unread); } .wa-conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; } .wa-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--wa-placeholder); font-size: 0.85rem; background: var(--wa-wallpaper); } .wa-conversation-active { flex: 1; display: flex; flex-direction: column; min-height: 0; } .wa-conv-header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--wa-panel); border-bottom: 1px solid var(--wa-border); flex-shrink: 0; } .wa-back-btn { display: none; background: none; border: none; color: var(--wa-text-dim); cursor: pointer; padding: 4px; flex-shrink: 0; } .wa-conv-header-info { flex: 1; min-width: 0; } .wa-conv-name { font-size: 0.92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-conv-status { font-size: 0.72rem; color: var(--wa-text-dim); } .wa-conv-status.is-typing { color: var(--wa-accent); display: flex; align-items: center; gap: 4px; } .wa-thread-preview.is-typing { color: var(--wa-accent); font-style: italic; } .wa-typing-dots { display: inline-flex; align-items: center; gap: 2px; } .wa-typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--wa-accent); animation: wa-typing-bounce 1.2s infinite ease-in-out; } .wa-typing-dots span:nth-child(2) { animation-delay: .15s; } .wa-typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes wa-typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } } .wa-messages { flex: 1; overflow-y: auto; padding: 16px 5%; display: flex; flex-direction: column; gap: 2px; background: var(--wa-wallpaper); } .wa-msg-row { display: flex; } .wa-msg-row.mine { justify-content: flex-end; } .wa-msg { max-width: 65%; padding: 6px 9px 7px; border-radius: 8px; font-size: 0.86rem; line-height: 1.35; box-shadow: 0 1px 0.5px rgba(0,0,0,0.13); margin: 2px 0; } .wa-msg.theirs { background: var(--wa-bubble-theirs); color: var(--wa-text); border-top-left-radius: 0; } .wa-msg.mine { background: var(--wa-bubble-mine); color: var(--wa-text); border-top-right-radius: 0; } .wa-msg-text { white-space: pre-wrap; word-wrap: break-word; } /* Floated so the timestamp+ticks sit at the end of the last text line instead of forcing their own row — a short message stays one flat line instead of ballooning into a tall, near-square block. */ .wa-msg-time-row { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 4px 0 -4px 10px; position: relative; top: 3px; } .wa-msg-time { font-size: 0.65rem; color: var(--wa-text-dim); white-space: nowrap; } .wa-msg-ticks { color: var(--wa-text-dim); display: flex; } .wa-msg-ticks.read { color: var(--wa-tick-read); } .wa-input-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--wa-panel); border-top: 1px solid var(--wa-border); flex-shrink: 0; } .wa-msg-input { flex: 1; border: none; outline: none; border-radius: 999px; padding: 10px 16px; background: var(--wa-bg); font-size: 0.88rem; color: var(--wa-text); font-family: inherit; } .wa-msg-input::placeholder { color: var(--wa-placeholder); } .wa-send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--wa-accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s; } .wa-send-btn:hover { background: var(--wa-accent-hover); } .wa-emoji-wrap { position: relative; flex-shrink: 0; } .wa-emoji-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent; color: var(--wa-text-dim); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s; } .wa-emoji-btn:hover { background: var(--wa-bg); } .wa-emoji-btn.active { color: var(--wa-accent); } .wa-emoji-picker { display: none; position: absolute; bottom: 46px; left: 0; z-index: 20; width: 272px; max-height: 216px; overflow-y: auto; padding: 8px; background: var(--wa-panel); border: 1px solid var(--wa-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); grid-template-columns: repeat(7, 1fr); gap: 2px; } .wa-emoji-picker.open { display: grid; } .wa-emoji-picker button { border: none; background: transparent; font-size: 1.2rem; line-height: 1.6; padding: 4px 0; border-radius: 6px; cursor: pointer; transition: background 0.1s; } .wa-emoji-picker button:hover { background: var(--wa-bg); } @media (max-width: 680px) { #chatModal { padding: 0; } .modal.wa-window { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; } .wa-sidebar { width: 100%; display: flex; } .wa-conversation { display: none; } .wa-back-btn { display: inline-flex; } .wa-window.wa-show-conversation .wa-sidebar { display: none; } .wa-window.wa-show-conversation .wa-conversation { display: flex; } } /* Editing indicator — a small pencil + name shown on a card someone else has open */ .card-editing-badge { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 0.68rem; color: var(--purple); font-weight: 600; } .card-editing-badge svg { flex-shrink: 0; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text2); font-size: 0.875rem; font-weight: 500; transition: all 0.15s; cursor: pointer; } .nav-item:hover { background: var(--surface-hover); color: var(--text); } .nav-item.active { background: rgba(37,99,235,0.15); color: var(--purple); } .nav-item.active svg { stroke: var(--purple); } /* Sidebar collapse */ .sidebar { transition: transform 0.25s ease; } .sidebar.sb-collapsed { transform: translateX(-100%); } .sb-collapse-btn { margin-left: auto; background: none; border: none; padding: 4px 6px; color: var(--text3); cursor: pointer; border-radius: var(--r-sm); display: flex; align-items: center; transition: color 0.15s, background 0.15s; } .sb-collapse-btn:hover { background: var(--surface-hover); color: var(--text2); } .sb-reopen-tab { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 51; background: var(--bg2); border: 1px solid var(--border); border-left: none; border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 7px; cursor: pointer; display: none; flex-direction: column; align-items: center; color: var(--text3); transition: color 0.15s; } .sb-reopen-tab:hover { color: var(--text); } .sb-reopen-tab.visible { display: flex; } /* Main */ .dash-main { margin-left: var(--sidebar-w); flex: 1; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; transition: margin-left 0.25s ease; } .dash-main.sb-collapsed { margin-left: 0; } /* Topbar */ .topbar { height: var(--topbar-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; flex-shrink: 0; } .topbar-left { display: flex; align-items: center; gap: 12px; } .sidebar-toggle { background: none; color: var(--text2); padding: 8px; border-radius: var(--r-sm); transition: all 0.2s; display: none; } .sidebar-toggle:hover { background: var(--surface-hover); color: var(--text); } .topbar-title { font-size: 1.05rem; font-weight: 700; } .topbar-right { display: flex; align-items: center; gap: 12px; } .days-selector { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; } .days-btn { padding: 5px 12px; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; background: none; color: var(--text2); transition: all 0.2s; } .days-btn.active { background: var(--grad); color: #fff; } .days-btn:hover:not(.active) { background: var(--surface-hover); color: var(--text); } /* Views */ .view { display: none; padding: 24px; flex: 1; } .view.active { display: block; } .view-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } /* KPI Grid */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .kpi-card { border-radius: var(--r-lg); padding: 20px; display: flex; align-items: center; gap: 16px; transition: border-color 0.2s; } .kpi-card:hover { border-color: var(--border-hover); } .kpi-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-data { flex: 1; } .kpi-value { font-size: 1.7rem; font-weight: 800; line-height: 1; } .kpi-label { font-size: 0.75rem; color: var(--text2); margin-top: 3px; } /* Charts Row */ .charts-row { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 20px; } .chart-card { border-radius: var(--r-lg); padding: 20px; } .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .chart-header h3 { font-size: 0.9rem; font-weight: 700; } .chart-sub { font-size: 0.75rem; color: var(--text2); } /* Fixed-height wrapper prevents Chart.js responsive growth loop */ .pr-chart-box { position: relative; height: 160px; flex-shrink: 0; overflow: hidden; } .pr-chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .pr-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .pr-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text2); justify-content: space-between; } .pr-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* Bottom Row */ .bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .card { border-radius: var(--r-lg); padding: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-header h3 { font-size: 0.9rem; font-weight: 700; } .card-badge { background: rgba(37,99,235,0.15); color: #1D4ED8; padding: 2px 8px; border-radius: 100px; font-size: 0.72rem; } /* Leaderboard */ .leaderboard-list { display: flex; flex-direction: column; gap: 8px; } .lb-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-hover); cursor: pointer; transition: border-color 0.2s; border: 1px solid transparent; } .lb-item:hover { border-color: var(--purple); } .lb-position { width: 24px; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--text3); flex-shrink: 0; } .lb-position.gold { color: var(--amber); } .lb-position.silver { color: var(--text2); } .lb-position.bronze { color: #CD7F32; } .lb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; } .lb-avatar img { width: 100%; height: 100%; object-fit: cover; } .lb-name { flex: 1; font-size: 0.85rem; font-weight: 600; } .lb-score-pill { background: rgba(37,99,235,0.15); color: #1D4ED8; padding: 3px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 700; } .lb-meta { font-size: 0.72rem; color: var(--text3); } /* Recent Commits */ .commits-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; } .commit-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: var(--surface-hover); } .commit-item-link { cursor: pointer; transition: background 0.15s, border-color 0.15s; border: 1px solid transparent; } .commit-item-link:hover { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.25); } .commit-item-link:hover .commit-sha { background: rgba(37,99,235,0.2); } .commit-sha { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--purple); background: rgba(37,99,235,0.1); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; } .commit-sha-link { text-decoration: none; } .commit-sha-link:hover code { background: rgba(37,99,235,0.25); text-decoration: underline; } .commit-dev-link { display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-radius:6px; padding:2px 6px 2px 2px; transition:background 0.15s, color 0.15s; } .commit-dev-link:hover { background:rgba(37,99,235,0.12); color:var(--purple); } .commit-msg { font-size: 0.82rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .commit-date { font-size: 0.7rem; color: var(--text3); flex-shrink: 0; } .commit-quality { font-size: 0.7rem; padding: 1px 6px; border-radius: 100px; flex-shrink: 0; } .q-high { background: rgba(16,185,129,0.15); color: var(--green); } .q-mid { background: rgba(245,158,11,0.15); color: var(--amber); } .q-low { background: rgba(239,68,68,0.15); color: var(--red); } /* Data Table */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .data-table th { text-align: left; padding: 10px 14px; color: var(--text3); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } .data-table td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.07); vertical-align: middle; } .data-table tr:hover td { background: var(--surface-hover); } .table-loading { text-align: center; padding: 40px; color: var(--text3); } .table-loading .spinner { margin: 0 auto 8px; } /* Sortable table headers */ .th-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .th-sortable:hover { color: var(--text); } .sort-icon { font-size: 0.7rem; opacity: 0.5; margin-left: 3px; } .sort-icon.asc, .sort-icon.desc { opacity: 1; color: var(--purple); } /* PR approval dropdown */ .pr-approval-wrap { position: relative; display: inline-block; } .pr-approval-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: rgba(16,185,129,0.12); color: var(--green); border: 1px solid rgba(16,185,129,0.25); cursor: pointer; white-space: nowrap; transition: background 0.15s; } .pr-approval-toggle:hover { background: rgba(16,185,129,0.22); } .pr-approval-chevron { transition: transform 0.2s; flex-shrink: 0; } .pr-approval-wrap.open .pr-approval-chevron { transform: rotate(180deg); } .pr-approval-dropdown { display: none; position: absolute; top: calc(100% + 5px); left: 0; z-index: 200; min-width: 170px; background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--r-md); padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); } .pr-approval-wrap.open .pr-approval-dropdown { display: block; } .pr-approval-item { display: block; padding: 6px 10px; font-size: 0.8rem; color: var(--text); border-radius: var(--r-sm); white-space: nowrap; } .pr-approval-item:hover { background: var(--surface-hover); } /* PR State Badge */ .pr-state { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; } .pr-merged { background: rgba(37,99,235,0.15); color: #1D4ED8; } .pr-open { background: rgba(16,185,129,0.15); color: var(--green); } .pr-closed { background: rgba(71,85,105,0.3); color: var(--text3); } /* PR Stats Bar */ .pr-stats-bar { border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 16px; display: flex; gap: 24px; } .pr-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pr-stat .ps-num { font-size: 1.5rem; font-weight: 800; } .pr-stat .ps-label { font-size: 0.72rem; color: var(--text2); } /* State Tabs */ .pr-state-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; } .state-tab { padding: 5px 14px; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; background: none; color: var(--text2); transition: all 0.2s; } .state-tab.active { background: var(--grad); color: #fff; } .state-tab:hover:not(.active) { background: var(--surface-hover); color: var(--text); } /* Developer Grid */ .developers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .dev-card { border-radius: var(--r-lg); padding: 20px; transition: transform 0.2s, border-color 0.2s; cursor: pointer; } .dev-card:hover { transform: translateY(-3px); border-color: var(--border-hover); } .dev-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .dev-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; color: #fff; overflow: hidden; flex-shrink: 0; } .dev-avatar img { width: 100%; height: 100%; object-fit: cover; } .dev-name { font-weight: 700; font-size: 0.9rem; } .dev-login { font-size: 0.75rem; color: var(--text2); } .dev-score { display: flex; align-items: center; justify-content: space-between; background: var(--bg3); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 12px; } .dev-score-val { font-size: 2rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .dev-score-label { font-size: 0.72rem; color: var(--text2); } .dev-sort-highlight .dm-val { font-size: 1.5rem; font-weight: 900; } .dev-sort-highlight .dm-label { font-size: 0.72rem; color: var(--text3); margin-top: 2px; } .dev-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .dev-metric { background: var(--surface); border-radius: var(--r-sm); padding: 8px; text-align: center; } .dev-metric .dm-val { font-size: 1rem; font-weight: 700; } .dev-metric .dm-label { font-size: 0.68rem; color: var(--text3); } /* Repos Grid */ .repos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .repo-card { border-radius: var(--r-lg); padding: 20px; transition: transform 0.2s, border-color 0.2s; } .repo-card:hover { transform: translateY(-2px); border-color: var(--border-hover); } .repo-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 8px; } .repo-name { font-weight: 700; font-size: 0.95rem; } .repo-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; min-height: 24px; } .repo-label-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: rgba(37,99,235,0.18); color: #1D4ED8; border: 1px solid rgba(37,99,235,0.3); } .repo-label-empty { font-size: 0.72rem; color: var(--text3); font-style: italic; } .repo-label-edit-btn { background: none; border: none; color: var(--text3); cursor: pointer; padding: 3px; border-radius: 4px; display: flex; align-items: center; transition: color 0.15s, background 0.15s; } .repo-label-edit-btn:hover { color: var(--purple); background: rgba(37,99,235,0.1); } .repo-label-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; } .repo-label-input { flex: 1; background: rgba(37,99,235,0.07); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 0.8rem; padding: 5px 10px; outline: none; transition: border-color 0.2s; } .repo-label-input:focus { border-color: var(--purple); } .repo-desc { font-size: 0.82rem; color: var(--text2); margin-bottom: 14px; line-height: 1.5; min-height: 40px; } .repo-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .repo-meta-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--text3); } .repo-actions { display: flex; gap: 8px; } .last-sync { font-size: 0.7rem; color: var(--text3); } /* Modals */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 24px; } .modal-overlay.open { display: flex; } .modal-wide .modal { max-width: 700px; } .modal { width: 100%; max-width: 480px; border-radius: var(--r-xl); animation: modalIn 0.2s ease; display: flex; flex-direction: column; max-height: calc(100vh - 48px); } @keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .modal-header h2 { font-size: 1rem; font-weight: 700; } .modal-close { background: none; color: var(--text2); font-size: 1.2rem; padding: 4px; border-radius: var(--r-sm); transition: all 0.2s; } .modal-close:hover { background: var(--surface-hover); color: var(--text); } .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; } .confirm-modal { max-width: 360px; } .confirm-modal-header { gap: 12px; } .confirm-modal-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,0.12); color: var(--red); font-size: 1.1rem; } .confirm-modal-msg { font-size: 0.88rem; color: var(--text2); line-height: 1.6; margin: 0; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-size: 0.85rem; font-weight: 600; } .form-hint { font-size: 0.75rem; color: var(--text3); line-height: 1.5; } .text-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); padding: 10px 14px; font-size: 0.875rem; width: 100%; transition: border-color 0.2s; } .text-input:focus { outline: none; border-color: var(--purple); } .select-input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); padding: 10px 14px; font-size: 0.875rem; cursor: pointer; } .select-input:focus { outline: none; border-color: var(--purple); } .input-row { display: flex; gap: 8px; } .input-row .text-input { flex: 1; } .verify-result { font-size: 0.82rem; border-radius: var(--r-md); padding: 8px 12px; display: none; } .verify-success { display: block; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: var(--green); } .verify-error { display: block; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red); } /* Developer Detail Modal */ .dev-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .dev-detail-av { width: 60px; height: 60px; border-radius: 50%; background: var(--grad); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: #fff; overflow: hidden; } .dev-detail-av img { width: 100%; height: 100%; object-fit: cover; } .dev-detail-info h3 { font-size: 1.1rem; font-weight: 700; } .dev-detail-info p { font-size: 0.82rem; color: var(--text2); } .dev-detail-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .ds-card { background: var(--bg3); border-radius: var(--r-md); padding: 14px; text-align: center; } .ds-val { font-size: 1.5rem; font-weight: 800; } .ds-label { font-size: 0.7rem; color: var(--text2); margin-top: 2px; } /* Toast */ .toast-container { position: fixed; top: 80px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 16px; min-width: 260px; max-width: 360px; font-size: 0.85rem; display: flex; align-items: flex-start; gap: 10px; animation: toastIn 0.3s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.10); } @keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } } .toast-icon { flex-shrink: 0; } .toast-success { border-left: 3px solid var(--green); } .toast-error { border-left: 3px solid var(--red); } .toast-info { border-left: 3px solid var(--purple); } .toast-loading { border-left: 3px solid var(--blue); } .toast-warn { border-left: 3px solid #F59E0B; } /* Loading */ .loading-state { display: flex; align-items: center; gap: 10px; color: var(--text3); padding: 24px; font-size: 0.85rem; } .loading-state.full { justify-content: center; padding: 60px; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: spin 0.7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Empty state */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text3); } .empty-state svg { margin: 0 auto 16px; opacity: 0.4; } .empty-state h3 { font-size: 0.95rem; color: var(--text2); margin-bottom: 8px; } .empty-state p { font-size: 0.82rem; } /* ── Repo Selector ────────────────────────────────────────────────────────── */ .repo-selector-wrap { position: relative; flex: 1; display: flex; justify-content: center; max-width: 380px; } .repo-selector-btn { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); padding: 8px 14px; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; cursor: pointer; width: 100%; max-width: 340px; white-space: nowrap; overflow: hidden; } .repo-selector-btn:hover { border-color: var(--border-hover); background: var(--surface-hover); } .repo-selector-btn.active { border-color: var(--purple); background: rgba(37,99,235,0.08); } .repo-selector-btn span:nth-child(2) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; } .rs-badge { background: rgba(37,99,235,0.2); color: #1D4ED8; padding: 1px 7px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } .rs-badge:empty { display: none; } .rs-chevron { flex-shrink: 0; color: var(--text3); transition: transform 0.2s; } .repo-selector-btn[aria-expanded="true"] .rs-chevron { transform: rotate(180deg); } .repo-selector-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 340px; max-height: 400px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.14); z-index: 200; display: none; flex-direction: column; overflow: hidden; animation: dropIn 0.15s ease; } .repo-selector-dropdown.open { display: flex; } @keyframes dropIn { from { opacity:0; transform:translateX(-50%) translateY(-6px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } .rsd-search-wrap { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; color: var(--text3); } .rsd-search { flex: 1; background: none; border: none; color: var(--text); font-size: 0.85rem; outline: none; font-family: inherit; } .rsd-search::placeholder { color: var(--text3); } .rsd-list { overflow-y: auto; flex: 1; padding: 6px; } .rsd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; transition: background 0.15s; border: 1px solid transparent; } .rsd-item:hover { background: var(--surface-hover); } .rsd-item.selected { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); } .rsd-item-all { color: var(--text2); font-size: 0.85rem; font-weight: 500; } .rsd-item-all svg { color: var(--text3); } .rsd-divider { height: 1px; background: var(--border); margin: 4px 0; } .rsd-repo-icon { width: 32px; height: 32px; border-radius: var(--r-sm); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; } .rsd-info { flex: 1; overflow: hidden; } .rsd-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rsd-meta { font-size: 0.72rem; color: var(--text3); margin-top: 1px; } .rsd-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .rsd-stat { font-size: 0.7rem; color: var(--text3); } .provider-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; flex-shrink: 0; } .provider-azure { background: rgba(0,120,212,0.15); color: #60A5FA; } .provider-github { background: rgba(255,255,255,0.08); color: var(--text2); } /* Repo Context Bar */ .repo-context-bar { background: rgba(37,99,235,0.08); border-bottom: 1px solid rgba(37,99,235,0.2); padding: 7px 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .rcb-inner { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text2); } .rcb-provider { font-size: 0.68rem; font-weight: 700; } #rcbRepoName { color: var(--text); font-weight: 600; } .rcb-sep { color: var(--text3); } .rcb-clear { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(37,99,235,0.3); color: #1D4ED8; border-radius: var(--r-md); padding: 4px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .rcb-clear:hover { background: rgba(37,99,235,0.15); border-color: var(--purple); } /* Settings sections */ .settings-section { display: flex; flex-direction: column; gap: 14px; } .settings-section-header { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; } .settings-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ══════════════════════════════════════ RESPONSIVE ══════════════════════════════════════ */ @media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .charts-row { grid-template-columns: 1fr; } .chart-side { display: none; } .hero-cards { grid-template-columns: repeat(2, 1fr); } .steps-grid { grid-template-columns: 1fr; } .step-connector { display: none; } } @media (max-width: 900px) { .features-bento { grid-template-columns: 1fr 1fr; } .feat-lg, .feat-wide { grid-column: 1 / -1; } .metrics-grid { grid-template-columns: repeat(2, 1fr); } .bottom-row { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .nav-links { display: none; } .nav-hamburger { display: flex; } .nav-actions { display: none; } .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .dash-main { margin-left: 0; } .sidebar-toggle { display: flex; } .hero { padding: 100px 0 60px; } .hero-cards { grid-template-columns: repeat(2, 1fr); } .stats-grid-4 { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: 1fr 1fr; } .developers-grid { grid-template-columns: 1fr; } .repos-grid { grid-template-columns: 1fr; } .dev-detail-scores { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .hero-cards { grid-template-columns: 1fr 1fr; } .float-3, .float-4 { display: none; } .features-bento { grid-template-columns: 1fr; } .metrics-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .kpi-grid { grid-template-columns: 1fr; } .topbar-right .days-selector { display: none; } } /* ── Developer Sort/Filter Toolbar ── */ .dev-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .sort-tabs { display: flex; gap: 4px; background: rgba(37,99,235,0.06); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; flex-wrap: wrap; } .sort-tab { display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; color: var(--text2); background: none; border: none; transition: background 0.15s, color 0.15s; white-space: nowrap; } .sort-tab:hover { background: rgba(37,99,235,0.08); color: var(--text); } .sort-tab.active { background: rgba(37,99,235,0.2); color: #1D4ED8; } .sort-tab svg { opacity: 0.7; flex-shrink: 0; } .sort-tab.active svg { opacity: 1; } .dev-search-wrap { display: flex; align-items: center; gap: 8px; background: rgba(37,99,235,0.06); border: 1px solid var(--border); border-radius: var(--r-md); padding: 7px 12px; min-width: 180px; transition: border-color 0.2s; } .dev-search-wrap:focus-within { border-color: var(--purple); } .dev-search-wrap svg { color: var(--text3); flex-shrink: 0; } .dev-search-input { background: none; border: none; color: var(--text); font-size: 0.82rem; outline: none; width: 100%; } .dev-search-input::placeholder { color: var(--text3); } /* ── Org filter tabs ── */ .org-filter-tabs { display: flex; gap: 3px; background: rgba(37,99,235,0.06); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; } .org-tab { padding: 5px 13px; border-radius: 7px; font-size: 0.78rem; font-weight: 600; color: var(--text2); background: none; border: none; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; } .org-tab:hover { background: rgba(37,99,235,0.08); color: var(--text); } .org-tab.active { background: rgba(37,99,235,0.2); color: #1D4ED8; } .org-tab.ps.active { background: rgba(59,130,246,0.2); color: #1D4ED8; } .org-tab.osb.active { background: rgba(16,185,129,0.2); color: #065F46; } /* ── PS vs OSB comparison panel ── */ .org-comparison { display: none; grid-template-columns: 1fr auto 1fr; gap: 0; background: rgba(37,99,235,0.05); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden; } .org-comparison.visible { display: grid; } .orc-side { padding: 18px 20px; } .orc-side.ps { border-right: 1px solid var(--border); } .orc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .orc-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.06em; text-transform: uppercase; } .orc-badge.ps { background: rgba(59,130,246,0.2); color: #1D4ED8; } .orc-badge.osb { background: rgba(16,185,129,0.2); color: #065F46; } .orc-title { font-size: 0.82rem; color: var(--text2); } .orc-stats { display: flex; flex-direction: column; gap: 8px; } .orc-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .orc-row-label { color: var(--text3); } .orc-row-val { font-weight: 700; color: var(--text); } .orc-row-val.ps { color: #1D4ED8; } .orc-row-val.osb { color: #065F46; } .orc-divider { display: flex; align-items: center; justify-content: center; padding: 0 14px; font-size: 0.78rem; font-weight: 700; color: var(--text3); border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: rgba(37,99,235,0.04); } .orc-vs { font-size: 1rem; font-weight: 800; color: var(--text2); } .orc-winner { margin-top: 12px; padding: 8px 12px; border-radius: 7px; font-size: 0.73rem; font-weight: 600; text-align: center; } .orc-winner.ps { background: rgba(59,130,246,0.12); color: #1D4ED8; } .orc-winner.osb { background: rgba(16,185,129,0.12); color: #065F46; } .orc-winner.tie { background: rgba(245,158,11,0.12); color: #92400E; } .dev-sort-indicator { font-size: 0.75rem; color: var(--text3); margin-bottom: 10px; min-height: 18px; } /* ── Quality Score Popover ── */ .quality-popover { position: fixed; z-index: 2000; width: 340px; background: #FFFFFF; border: 1px solid rgba(37,99,235,0.35); border-radius: var(--r-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.14), 0 0 0 1px rgba(37,99,235,0.1); padding: 16px; font-size: 0.85rem; animation: popoverIn 0.15s ease-out; } @keyframes popoverIn { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .qp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .qp-title { font-weight: 600; color: var(--text); flex: 1; } .qp-score { font-size: 1.1rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; } .qp-close { background: none; color: var(--text3); font-size: 0.8rem; padding: 2px 5px; border-radius: 4px; transition: color 0.2s; } .qp-close:hover { color: var(--text); } .qp-message { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text2); background: rgba(37,99,235,0.06); border-radius: 6px; padding: 7px 9px; margin-bottom: 12px; word-break: break-word; line-height: 1.5; max-height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qp-checks { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .qp-check-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: rgba(37,99,235,0.05); } .qp-check-row.passed { background: rgba(16,185,129,0.08); } .qp-check-row.failed { background: rgba(239,68,68,0.08); } .qp-check-icon { flex-shrink: 0; font-size: 0.9rem; } .qp-check-label { flex: 1; color: var(--text2); font-size: 0.8rem; } .qp-check-row.failed .qp-check-label { color: var(--text); } .qp-check-pts { font-size: 0.75rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; white-space: nowrap; } .qp-check-row.passed .qp-check-pts { color: var(--green); } .qp-check-row.failed .qp-check-pts { color: var(--text3); } .qp-tips { border-top: 1px solid var(--border); padding-top: 10px; } .qp-tips-title { font-size: 0.75rem; font-weight: 600; color: var(--amber); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .qp-tip-item { display: flex; gap: 8px; padding: 6px 8px; border-radius: 6px; margin-bottom: 5px; background: rgba(245,158,11,0.07); border-left: 2px solid var(--amber); font-size: 0.79rem; color: var(--text2); line-height: 1.5; } .qp-tip-pts { flex-shrink: 0; font-weight: 700; color: var(--amber); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; } /* ── Quality badge clickable ── */ .quality-badge { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .quality-badge:hover { transform: scale(1.1); box-shadow: 0 0 8px rgba(37,99,235,0.4); } /* ── Developer quality insight panel ── */ /* ── Developer commit activity graph ── */ .dca-panel { background: rgba(37,99,235,0.05); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; } .dca-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .dca-title { font-size: 0.85rem; font-weight: 600; color: var(--text); } .dca-trend { font-size: 0.78rem; font-weight: 600; } .dca-chart-wrap { position: relative; height: 110px; margin-bottom: 12px; } .dca-stats { display: flex; gap: 6px; margin-bottom: 14px; } .dca-stat { flex: 1; background: rgba(37,99,235,0.05); border: 1px solid var(--border); border-radius: 8px; padding: 8px 6px; text-align: center; } .dca-stat-val { font-size: 1.1rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1.2; } .dca-stat-lbl { font-size: 0.65rem; color: var(--text3); margin-top: 2px; } .dca-dow-wrap { border-top: 1px solid var(--border); padding-top: 10px; } .dca-dow-title { font-size: 0.72rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .dca-dow-bars { display: flex; gap: 4px; align-items: flex-end; height: 52px; } .dca-dow-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; } .dca-dow-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; } .dca-dow-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; transition: height 0.4s ease; position: relative; } .dca-dow-count { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--text3); white-space: nowrap; } .dca-dow-label { font-size: 0.62rem; color: var(--text3); } /* ══════════════════════════════════════ CODE REVIEWER VIEW ══════════════════════════════════════ */ /* Setup card */ .cr-setup { padding: 20px 24px; border-radius: var(--r-lg); margin-bottom: 20px; } .cr-setup-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cr-setup-desc { font-size: 0.82rem; color: var(--text3); margin-bottom: 16px; } .cr-collapse-btn { flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 5px 7px; cursor: pointer; color: var(--text2); display: flex; align-items: center; transition: background 0.12s, transform 0.2s; } .cr-collapse-btn:hover { background: var(--surface-hover); } /* Saved reviews list */ .cr-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .cr-filter-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; } .cr-filter-tab { padding: 5px 14px; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; background: none; color: var(--text2); transition: all 0.2s; } .cr-filter-tab.active { background: var(--grad); color: #fff; } .cr-filter-tab:hover:not(.active) { background: var(--surface-hover); color: var(--text); } .cr-list-title { font-size: 1rem; font-weight: 700; color: var(--text); } .cr-list-sub { font-size: 0.75rem; color: var(--text3); } .cr-list-loading { display: flex; align-items: center; gap: 10px; padding: 32px; color: var(--text3); font-size: 0.83rem; } .cr-list-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; color: var(--text3); font-size: 0.85rem; text-align: center; } #crReviewsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cr-review-card { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .cr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cr-type-badge { font-size: 0.63rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid; } .cr-type-sonar { color: #0E7490; background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.3); } .cr-type-security { color: #B91C1C; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); } .cr-type-performance { color: #047857; background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); } .cr-type-energy { color: #B45309; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.3); } .cr-card-date { font-size: 0.72rem; color: var(--text3); white-space: nowrap; } .cr-card-repo { font-size: 0.9rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; overflow: hidden; } .cr-card-branch { display: inline-flex; align-items: center; gap: 3px; font-size: 0.72rem; font-weight: 500; font-family: 'JetBrains Mono', monospace; color: var(--text3); background: var(--bg3); border-radius: 4px; padding: 1px 6px; flex-shrink: 0; white-space: nowrap; } .cr-card-branch svg { flex-shrink: 0; opacity: 0.7; } .cr-card-path { font-size: 0.76rem; color: var(--text3); font-family: 'JetBrains Mono', monospace; } .cr-card-stats { display: flex; align-items: center; gap: 10px; } .cr-card-score { font-size: 1.5rem; font-weight: 800; line-height: 1; } .cr-card-score-lbl { font-size: 0.65rem; color: var(--text3); font-weight: 400; } .cr-card-pill { font-size: 0.72rem; color: var(--text3); background: rgba(37,99,235,0.07); border: 1px solid var(--border); border-radius: 99px; padding: 2px 8px; } .cr-card-status { display: flex; flex-direction: column; gap: 5px; } .cr-card-sb { height: 5px; border-radius: 99px; background: rgba(0,0,0,0.10); position: relative; overflow: hidden; } .cr-card-sb-done { position: absolute; left:0; top:0; height:100%; background:#10B981; border-radius:99px; } .cr-card-sb-inp { position: absolute; top:0; height:100%; background:#F59E0B; border-radius:99px; } .cr-card-sb-rej { position: absolute; top:0; height:100%; background:#F43F5E; border-radius:99px; } .cr-card-sc { display: flex; gap: 8px; flex-wrap: wrap; } .cr-css-todo { font-size: 0.68rem; color: #94A3B8; } .cr-css-inp { font-size: 0.68rem; color: #F59E0B; } .cr-css-done { font-size: 0.68rem; color: #10B981; } .cr-css-rej { font-size: 0.68rem; color: #F43F5E; } .cr-card-energy { display: inline-flex; align-items: center; gap: 3px; font-size: 1.1rem; font-weight: 800; color: #F59E0B; line-height: 1; } .cr-card-energy svg { opacity: 0.85; } .cr-card-energy-lbl { font-size: 0.65rem; color: var(--text3); font-weight: 400; } .cr-card-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; } .cr-rerun-btn { display: inline-flex; align-items: center; gap: 4px; } .cr-del-btn { color: var(--red) !important; border-color: rgba(239,68,68,0.3) !important; } .cr-del-btn:hover { background: rgba(239,68,68,0.1) !important; } @keyframes cr-card-flash { 0%,100% { box-shadow: var(--glass-shadow); } 40% { box-shadow: 0 0 0 3px rgba(245,158,11,0.55), var(--glass-shadow); } } .cr-card-highlight { animation: cr-card-flash 2.5s ease; } /* Detail view */ .cr-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .cr-export-btns { display: flex; gap: 8px; } .cr-export-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; padding: 6px 13px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); border-radius: var(--r-md); cursor: pointer; transition: background 0.12s, color 0.12s; } .cr-export-btn:hover { background: var(--surface-hover); color: var(--text); } .cr-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; margin-bottom: 0; background: none; border: 1px solid var(--border); color: var(--text2); padding: 7px 14px; border-radius: var(--r-md); cursor: pointer; transition: background 0.12s; } .cr-back-btn:hover { background: var(--surface-hover); } .cr-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .cr-meta-pill { font-size: 0.72rem; color: var(--text2); background: rgba(37,99,235,0.07); border: 1px solid var(--border); border-radius: 4px; padding: 2px 9px; font-family: 'JetBrains Mono', monospace; } .cr-meta-date { font-family: inherit; color: var(--text3); } /* Files reviewed dropdown */ .cr-files-select { flex: 1; min-width: 0; max-width: 480px; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; } .cr-ai-badge { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: linear-gradient(135deg, rgba(37,99,235,0.25), rgba(59,130,246,0.25)); border: 1px solid rgba(37,99,235,0.4); color: #1D4ED8; letter-spacing: 0.08em; text-transform: uppercase; } /* Config layout */ .cr-config { display: flex; flex-direction: column; gap: 18px; } .cr-config-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media(max-width: 700px) { .cr-config-row { grid-template-columns: 1fr; } } .cr-field { display: flex; flex-direction: column; gap: 6px; } .cr-label { font-size: 0.78rem; font-weight: 600; color: var(--text2); } .cr-optional { font-weight: 400; color: var(--text3); font-size: 0.72rem; } .cr-hint { font-size: 0.75rem; color: var(--text3); } /* Folder tree explorer */ .cr-explorer-wrap { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .cr-explorer-topbar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: rgba(37,99,235,0.04); } .cr-sel-breadcrumb { flex: 1; font-size: 0.78rem; color: var(--accent); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-explorer-tree { max-height: 200px; overflow-y: auto; padding: 4px 0; } .cr-node { user-select: none; } .cr-node-row { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 0; cursor: pointer; border-radius: 6px; margin: 1px 4px; transition: background 0.1s; } .cr-node-row:hover { background: rgba(37,99,235,0.07); } .cr-node-sel > .cr-node-row { background: rgba(37,99,235,0.12); } .cr-node-sel > .cr-node-row .cr-node-label { color: #1D4ED8; font-weight: 600; } .cr-node-toggle { cursor: pointer; flex-shrink: 0; color: var(--text3); transition: transform 0.15s; } .cr-node-toggle.open { transform: rotate(90deg); } .cr-node-icon { flex-shrink: 0; color: var(--text3); pointer-events: none; } .cr-node-label { font-size: 0.82rem; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .cr-node-root-lbl { color: var(--text1); font-weight: 600; } .cr-node-loading { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 0.77rem; color: var(--text3); } .cr-node-empty { padding: 5px 8px; font-size: 0.77rem; color: var(--text3); font-style: italic; } /* Review type buttons */ .cr-type-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .cr-type-btn { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 0.83rem; font-weight: 600; cursor: pointer; transition: all 0.15s; } .cr-type-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-hover); } .cr-type-btn.active { background: rgba(37,99,235,0.15); border-color: rgba(37,99,235,0.5); color: #1D4ED8; } /* Model selector */ .cr-model-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .cr-model-btn { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); color: var(--text2); font-size: 0.83rem; font-weight: 600; cursor: pointer; transition: all 0.15s; } .cr-model-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-hover); } .cr-model-btn.active { background: rgba(20,184,166,0.15); border-color: rgba(20,184,166,0.5); color: #0D9488; } .cr-model-sub { font-size: 0.72rem; font-weight: 400; color: var(--text3); margin-left: 2px; } .cr-model-btn.active .cr-model-sub { color: rgba(45,212,191,0.7); } .cr-model-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: rgba(20,184,166,0.15); color: #0D9488; border: 1px solid rgba(20,184,166,0.3); } .cr-meta-model { background: rgba(20,184,166,0.12); color: #0D9488; border-color: rgba(20,184,166,0.25); } /* Loading */ .cr-loading { display: flex; align-items: center; gap: 16px; padding: 28px 24px; border-radius: var(--r-lg); margin-bottom: 20px; } .cr-loading-title { font-size: 0.9rem; font-weight: 600; color: var(--text); } .cr-loading-sub { font-size: 0.78rem; color: var(--text3); margin-top: 4px; } /* Results header */ .cr-results-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .cr-results-title { font-size: 1.05rem; font-weight: 700; color: var(--text); } .cr-results-summary { font-size: 0.83rem; color: var(--text2); margin-top: 6px; max-width: 600px; line-height: 1.6; } /* Score ring */ .cr-header-metrics { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .cr-score-ring { flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--sc, var(--green)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(37,99,235,0.05); } .cr-score-num { font-size: 1.35rem; font-weight: 800; line-height: 1; } .cr-score-lbl { font-size: 0.58rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; } /* Energy ring */ .cr-energy-ring { flex-shrink: 0; min-width: 80px; padding: 8px 14px; border-radius: var(--r-md); border: 2px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .cr-energy-ring-icon { margin-bottom: 1px; } .cr-energy-ring-val { font-size: 1.15rem; font-weight: 800; color: #F59E0B; line-height: 1; white-space: nowrap; } /* KPI strip */ .cr-kpis { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .cr-kpi { flex: 1; min-width: 64px; padding: 12px 8px; border-radius: var(--r-md); text-align: center; } .cr-kpi-val { font-size: 1.45rem; font-weight: 800; line-height: 1; } .cr-kpi-lbl { font-size: 0.63rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } /* Files reviewed row */ .cr-files-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .cr-files-lbl { font-size: 0.78rem; color: var(--text3); font-weight: 600; flex-shrink: 0; white-space: nowrap; } /* Issues list */ .cr-issues-list { display: flex; flex-direction: column; gap: 6px; } .cr-issue { border-radius: var(--r-md); overflow: hidden; border-left: 3px solid var(--sev-color, var(--border)); } .cr-issue-header { display: flex; align-items: center; gap: 8px; padding: 11px 16px; cursor: pointer; flex-wrap: wrap; transition: background 0.12s; } .cr-issue-header:hover { background: rgba(37,99,235,0.06); } .cr-sev-badge { flex-shrink: 0; font-size: 0.63rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid; } .cr-kwh-badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 700; white-space: nowrap; color: #F59E0B; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); padding: 2px 8px; border-radius: 99px; } .cr-kpi-energy { min-width: 110px; } .cr-cat-badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 600; color: var(--text3); background: rgba(37,99,235,0.07); padding: 2px 8px; border-radius: 4px; white-space: nowrap; } .cr-issue-title { flex: 1; font-size: 0.87rem; font-weight: 600; color: var(--text); min-width: 0; } .cr-issue-loc { font-size: 0.75rem; color: var(--text3); } .cr-loc-code { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text3); background: none; padding: 0; } .cr-chevron { flex-shrink: 0; color: var(--text3); transition: transform 0.2s; } .cr-issue.expanded .cr-chevron { transform: rotate(180deg); } /* Issue status select (inline in header) */ .cr-status-sel { -webkit-appearance: none; appearance: none; border: 1px solid; border-radius: 99px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; padding: 3px 10px; cursor: pointer; flex-shrink: 0; text-transform: uppercase; transition: all 0.12s; } .cr-status-sel:focus { outline: none; } .cr-status-todo { color: #94A3B8; border-color: rgba(148,163,184,0.4); background: rgba(148,163,184,0.08); } .cr-status-in_progress { color: #F59E0B; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); } .cr-status-done { color: #10B981; border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); } .cr-status-rejected { color: #F43F5E; border-color: rgba(244,63,94,0.4); background: rgba(244,63,94,0.08); } /* Dim closed issues slightly */ .cr-issue-status-done, .cr-issue-status-rejected { opacity: 0.55; } .cr-issue-status-done:hover, .cr-issue-status-rejected:hover { opacity: 1; } /* Status progress summary */ .cr-status-summary { border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; } .cr-ss-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cr-ss-pill { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; border: 1px solid; } .cr-ss-todo { color: #94A3B8; border-color: rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); } .cr-ss-inp { color: #F59E0B; border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.08); } .cr-ss-done { color: #10B981; border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); } .cr-ss-rej { color: #F43F5E; border-color: rgba(244,63,94,0.3); background: rgba(244,63,94,0.08); } .cr-ss-pct { font-size: 0.72rem; color: var(--text3); margin-left: auto; } .cr-ss-bar { height: 6px; border-radius: 99px; background: rgba(0,0,0,0.10); position: relative; overflow: hidden; } .cr-ss-bar-done { position: absolute; left: 0; top: 0; height: 100%; background: #10B981; border-radius: 99px; transition: width 0.3s; } .cr-ss-bar-inp { position: absolute; top: 0; height: 100%; background: #F59E0B; border-radius: 99px; transition: width 0.3s, margin-left 0.3s; } .cr-ss-bar-rej { position: absolute; top: 0; height: 100%; background: #F43F5E; border-radius: 99px; transition: width 0.3s, margin-left 0.3s; } /* Issue expandable body */ .cr-issue-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border); flex-direction: column; gap: 12px; } .cr-issue.expanded .cr-issue-body { display: flex; } .cr-issue-section { display: flex; flex-direction: column; gap: 6px; } .cr-issue-section-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); } .cr-issue-desc { font-size: 0.83rem; color: var(--text2); line-height: 1.65; } .cr-solution-wrap { background: rgba(37,99,235,0.06); border-radius: 8px; padding: 10px 12px; border-left: 2px solid rgba(37,99,235,0.4); } .cr-solution-label { color: #1E40AF; } .cr-issue-solution { font-size: 0.82rem; color: var(--text); line-height: 1.65; } .cr-issue-solution code { background: rgba(37,99,235,0.15); color: #1D4ED8; padding: 1px 5px; border-radius: 4px; font-size: 0.8em; } .cr-code-pre { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; background: rgba(0,0,0,0.04); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; white-space: pre; color: var(--text2); line-height: 1.5; } /* No issues state */ .cr-no-issues { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; border-radius: var(--r-lg); text-align: center; } /* ══════════════════════════════════════ SONAR SCAN VIEW ══════════════════════════════════════ */ .sonar-toolbar { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 18px; } .sonar-org-pill { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; background: rgba(37,99,235,0.15); color: #1D4ED8; border: 1px solid rgba(37,99,235,0.35); } .sonar-org-pill:empty { display: none; } .sonar-last-updated { font-size: 0.75rem; color: var(--text3); } .sonar-loading { display: flex; align-items: center; gap: 14px; padding: 28px 24px; border-radius: var(--r-lg); margin-bottom: 20px; color: var(--text2); font-size: 0.85rem; } .sonar-error { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border-radius: var(--r-lg); margin-bottom: 20px; color: var(--red); font-size: 0.85rem; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.3); } .sonar-kpis { display: flex; flex-direction: row; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .sonar-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px; min-width: 120px; text-align: center; border-radius: var(--r-md); gap: 4px; } .sonar-kpi-val { font-size: 1.6rem; font-weight: 800; line-height: 1; } .sonar-kpi-lbl { font-size: 0.68rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; } /* ── JIRA ANALYTICS ── */ .jira-toolbar { display: flex; flex-direction: row; gap: 10px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; } .jira-tabs { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; flex: 1; } .jira-tab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 99px; padding: 6px 14px; font-size: 0.82rem; font-weight: 500; background: transparent; color: var(--text2); transition: background 0.15s, color 0.15s, border-color 0.15s; cursor: pointer; } .jira-tab:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-hover); } .jira-tab.active { background: var(--purple); color: #fff; border-color: var(--purple); } .jira-tab-del, .jira-tab-edit { background: none; border: none; color: inherit; padding: 0; font-size: 0.75rem; line-height: 1; opacity: 0.5; cursor: pointer; transition: opacity 0.15s; display: inline-flex; align-items: center; } .jira-tab-del:hover, .jira-tab-edit:hover { opacity: 1; } .jira-section-header { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 24px 0 12px; } .jira-section-count { font-size: 0.72rem; font-weight: 600; background: var(--surface2); color: var(--text3); padding: 2px 8px; border-radius: 10px; } .jira-epic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 24px; } .jira-epic-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; cursor: pointer; text-align: left; color: inherit; transition: border-color 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 8px; } .jira-epic-card:hover { border-color: var(--purple); background: var(--surface-hover); } .jira-epic-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .jira-epic-key-pill { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; background: rgba(37,99,235,0.12); color: var(--purple); padding: 2px 7px; border-radius: 4px; white-space: nowrap; } .jira-epic-total-badge { font-size: 0.7rem; color: var(--text3); } .jira-epic-name { font-size: 0.85rem; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .jira-epic-bar { height: 7px; border-radius: 4px; background: var(--border); position: relative; overflow: hidden; display: flex; } .jira-epic-bar-done { background: var(--green); height: 100%; } .jira-epic-bar-inp { background: var(--amber); height: 100%; } .jira-epic-bar-todo { background: var(--blue); height: 100%; opacity: 0.45; } .jira-epic-stats { display: flex; gap: 10px; font-size: 0.72rem; flex-wrap: wrap; align-items: center; } .jira-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; text-align: center; color: var(--text2); border-radius: var(--r-lg); } .jira-loading { display: flex; align-items: center; gap: 14px; padding: 28px 24px; border-radius: var(--r-lg); margin-bottom: 20px; color: var(--text2); font-size: 0.85rem; } .jira-error { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; border-radius: var(--r-lg); margin-bottom: 20px; color: var(--red); font-size: 0.85rem; background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.3); } .jira-kpis { display: flex; flex-direction: row; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .jira-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px; min-width: 110px; text-align: center; border-radius: var(--r-md); gap: 4px; } .jira-kpi-clickable { cursor: pointer; border: 1px solid var(--border); transition: border-color 0.15s, transform 0.1s; color: inherit; } .jira-kpi-clickable:hover { border-color: var(--purple); transform: translateY(-2px); } .jira-kpi-val { font-size: 1.6rem; font-weight: 800; line-height: 1; } .jira-kpi-lbl { font-size: 0.68rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 3px; } .jira-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; } @media (max-width: 768px) { .jira-grid-2 { grid-template-columns: 1fr; } } .jira-panel { padding: 20px; border-radius: var(--r-lg); } .jira-panel-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; color: var(--text); } .jira-assignee-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .jira-assignee-row:last-child { border-bottom: none; } .jira-assignee-clickable { width: 100%; text-align: left; background: none; border: none; color: inherit; cursor: pointer; border-radius: var(--r-sm); transition: background 0.12s; } .jira-assignee-clickable:hover { background: var(--surface-hover); padding-left: 4px; } .jira-dev-issue-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; padding: 9px 10px; border-radius: var(--r-sm); font-size: 0.8rem; color: var(--text); text-decoration: none; transition: background 0.12s; border-bottom: 1px solid var(--border); } .jira-dev-issue-row:last-child { border-bottom: none; } .jira-dev-issue-row:hover { background: var(--surface-hover); } .jira-dev-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jira-dev-status-pill { font-size: 0.68rem; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .jira-dev-meta { display: flex; gap: 10px; font-size: 0.72rem; color: var(--text3); flex-shrink: 0; flex-wrap: nowrap; } .jira-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,0.25); color: #1D4ED8; } .jira-bar-track { flex: 1; height: 8px; border-radius: 99px; background: rgba(0,0,0,0.10); position: relative; overflow: hidden; } .jira-bar-todo, .jira-bar-inp, .jira-bar-done { position: absolute; top: 0; height: 100%; border-radius: 99px; } .jira-bar-todo { background: #3B82F6; left: 0; } .jira-bar-inp { background: #F59E0B; } .jira-bar-done { background: #10B981; } .jira-hbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .jira-hbar-label { width: 100px; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); flex-shrink: 0; } .jira-hbar-track { flex: 1; height: 8px; border-radius: 99px; background: rgba(0,0,0,0.10); overflow: hidden; } .jira-hbar-fill { height: 100%; border-radius: 99px; } .jira-hbar-count { font-size: 0.75rem; color: var(--text3); width: 30px; text-align: right; flex-shrink: 0; } .jira-sprint-header { padding: 20px; border-radius: var(--r-lg); margin-bottom: 18px; } .jira-sprint-name { font-size: 1.05rem; font-weight: 700; } .jira-sprint-meta { font-size: 0.78rem; color: var(--text2); margin-top: 4px; } .jira-sprint-bar-track { height: 6px; border-radius: 99px; background: rgba(0,0,0,0.10); margin-top: 12px; overflow: hidden; } .jira-sprint-bar-fill { height: 100%; border-radius: 99px; background: var(--green); transition: width 0.5s ease; } .jira-issue-group { margin-bottom: 16px; } .jira-issue-group-header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.82rem; margin-bottom: 6px; cursor: pointer; padding: 4px 0; user-select: none; } .jira-group-chevron { transition: transform 0.2s; color: var(--text3); } .jira-issue-group.collapsed .jira-group-chevron { transform: rotate(-90deg); } .jira-issue-group.collapsed .jira-issue-group-body { display: none; } .jira-issue-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); font-size: 0.82rem; color: var(--text); text-decoration: none; transition: background 0.12s; } .jira-issue-row:hover { background: var(--surface-hover); } .jira-issue-key { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--purple); background: rgba(37,99,235,0.1); padding: 2px 6px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; } .jira-issue-summary { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jira-priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .jira-type-icon { flex-shrink: 0; } .sonar-filter-bar { display: flex; flex-direction: row; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .sonar-search { flex: 1; max-width: 280px; } .sonar-gate-filters { display: flex; flex-direction: row; gap: 6px; } .sonar-gate-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: all 0.15s; } .sonar-gate-btn:hover { background: var(--surface-hover); color: var(--text); } .sonar-gate-btn.active { background: rgba(37,99,235,0.2); border-color: rgba(37,99,235,0.5); color: #1D4ED8; } .sonar-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .sonar-dot-ok { background: var(--green); } .sonar-dot-err { background: var(--red); } .sonar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; } .sonar-card { padding: 18px 20px; border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; text-decoration: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .sonar-card:hover { transform: translateY(-2px); border-color: rgba(37,99,235,0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.25); } .sonar-card-name { font-size: 0.9rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .sonar-gate-badge { display: inline-block; flex-shrink: 0; font-size: 0.65rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid; } .sonar-gate-ok { background: rgba(16,185,129,0.12); color: #10B981; border-color: rgba(16,185,129,0.3); } .sonar-gate-err { background: rgba(239,68,68,0.12); color: #EF4444; border-color: rgba(239,68,68,0.3); } .sonar-ratings { display: flex; flex-direction: row; gap: 6px; align-items: center; } .sonar-rating { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; flex-shrink: 0; } .sonar-stats { display: flex; flex-direction: row; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .sonar-stat { display: flex; flex-direction: column; align-items: center; min-width: 52px; } .sonar-stat-val { font-size: 1rem; font-weight: 700; line-height: 1.2; } .sonar-stat-lbl { font-size: 0.62rem; color: var(--text3); margin-top: 1px; } .sonar-bar-wrap { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .sonar-bar-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text3); } .sonar-bar-track { height: 5px; border-radius: 99px; background: rgba(0,0,0,0.10); overflow: hidden; } .sonar-bar-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease; } /* ═══════════════════════════════════════════════ Developer Search View ═══════════════════════════════════════════════ */ .search-hero { display: flex; justify-content: center; padding: 48px 0 32px; } .dev-search-box-wrap { position: relative; width: 100%; max-width: 600px; } .dev-search-field-row { display: flex; align-items: center; gap: 10px; background: rgba(37,99,235,0.07); border: 1.5px solid rgba(37,99,235,0.35); border-radius: 32px; padding: 12px 20px; transition: border-color 0.2s, box-shadow 0.2s; } .dev-search-field-row:focus-within { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(37,99,235,0.12); } .dev-search-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 1.05rem; font-family: inherit; min-width: 0; } .dev-search-input::placeholder { color: var(--text3); } .dev-search-clear { background: none; border: none; color: var(--text3); cursor: pointer; padding: 2px; display: flex; align-items: center; flex-shrink: 0; transition: color 0.15s; } .dev-search-clear:hover { color: var(--text); } .dev-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #FFFFFF; border: 1px solid rgba(0,0,0,0.12); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.14); z-index: 200; overflow: hidden; animation: dropIn 0.15s ease; } @keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .dev-search-option { display: flex; align-items: center; gap: 11px; padding: 10px 18px; cursor: pointer; transition: background 0.12s; border: none; width: 100%; text-align: left; background: none; color: var(--text); border-bottom: 1px solid rgba(0,0,0,0.07); } .dev-search-option:last-child { border-bottom: none; } .dev-search-option:hover { background: rgba(37,99,235,0.12); } .dev-search-option-name { font-weight: 600; font-size: 0.88rem; } .dev-search-option-login { font-size: 0.73rem; color: var(--text3); margin-top: 1px; } /* Profile page */ .search-profile-page { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; } .search-profile-header { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-radius: var(--r-lg); flex-wrap: wrap; } .search-profile-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); } .search-metric-card { padding: 16px 12px; text-align: center; background: rgba(37,99,235,0.06); } .search-metric-val { font-size: 1.3rem; font-weight: 800; line-height: 1.2; } .search-metric-lbl { font-size: 0.66rem; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; } .search-profile-card { padding: 22px 24px; border-radius: var(--r-lg); } .search-card-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .search-section-divider { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 700; color: var(--text2); margin: 8px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .search-jira-section { display: flex; flex-direction: column; } .search-jira-board-card { padding: 22px 24px; border-radius: var(--r-lg); margin-bottom: 12px; } .search-jira-board-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .search-jira-board-name { font-size: 0.92rem; font-weight: 700; color: var(--purple); } .search-jira-stats-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .search-jira-stat { text-align: center; padding: 11px 18px; background: rgba(37,99,235,0.07); border-radius: 10px; min-width: 72px; border: 1px solid var(--border); } .search-commits-prs-grid { grid-template-columns: 1fr 1fr; } @media (max-width: 680px) { .search-profile-metrics { grid-template-columns: repeat(3, 1fr); } .search-hero { padding: 28px 0 20px; } .search-commits-prs-grid { grid-template-columns: 1fr !important; } }