:root { /* Material Design colour tokens */ --blue: #1a73e8; --blue-light: #e8f0fe; --green: #34a853; --green-light: #e6f4ea; --yellow: #f9ab00; --yellow-light: #fef7e0; --red: #c5221f; --red-light: #fce8e6; --purple: #9334e6; --purple-light: #f3e8fd; --grey: #9aa0a6; --grey-light: #f1f3f4; /* Themed surfaces (overridden per mood) */ --bg: #f1f3f4; --surface: #ffffff; --chart-bg: #f8f9fa; --on-surface: #202124; --on-surface-variant: #5f6368; --outline: #e8eaed; --outline-soft: #e8eaed; --accent: #1a73e8; --accent-soft: #e8f0fe; /* Semantic aliases (legacy compat) */ --primary-color: #1a73e8; --secondary-color: #34a853; --accent-color: #c5221f; --warning-color: #f9ab00; --neutral-color: #5f6368; --surface-color: #ffffff; --background-color: #f1f3f4; --on-surface-secondary: #5f6368; /* Shape */ --radius-card: 16px; --radius-chart: 12px; --radius-bar: 4px; --border-radius: 12px; --border-radius-small: 8px; /* Typography */ --font-body: 'Roboto', 'Google Sans', sans-serif; --font-display: 'Google Sans', 'Roboto', sans-serif; --font-num: 'Roboto', sans-serif; /* Density — Comfy (default) — aligned with reference */ --pad-card: 24px 48px 24px; --pad-chart: 24px; --gap-section: 40px; --gap-grid: 16px; --fact-min-h: 160px; --fact-pad: 18px 20px; --fact-value: 32px; --section-title: 20px; --row-pad: 16px 20px; --chart-h: 360px; /* Elevation — канон elev-1/2/3 из спеки аудита (02.07.2026, №35) */ --shadow-1: 0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px 1px rgba(60, 64, 67, 0.05); --shadow-2: 0 1px 3px rgba(60, 64, 67, 0.14), 0 4px 8px 3px rgba(60, 64, 67, 0.07); --shadow-3: 0 4px 8px rgba(60, 64, 67, 0.16), 0 8px 24px 6px rgba(60, 64, 67, 0.10); --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* * ── MOOD & DENSITY SYSTEM (for future React migration) ────────────── * Uncomment and wire up via data-mood / data-density on * when upgrading to React. Do not activate in vanilla mode. * * body[data-mood="editorial"] { * --bg: #f4f1ec; --surface: #fbfaf7; --chart-bg: #f4f1ec; * --on-surface: #1a1612; --on-surface-variant: #6b6358; * --outline: #e1d9cc; --outline-soft: #ece5d8; * --accent: #8a3a1f; --accent-soft: #f0e3db; * --font-body: 'Fraunces', Georgia, serif; * --font-display: 'Fraunces', Georgia, serif; * --radius-card: 2px; --radius-chart: 2px; --radius-bar: 0px; * } * body[data-mood="terminal"] { * --bg: #0b0d0a; --surface: #11140f; --chart-bg: #0b0d0a; * --on-surface: #c8f5b3; --on-surface-variant: #6b8a5e; * --outline: #1f2a18; --outline-soft: #19211a; * --accent: #5dff8a; --accent-soft: #122415; * --font-body: 'JetBrains Mono', monospace; * --radius-card: 0px; --radius-chart: 0px; --radius-bar: 0px; * } * body[data-density="compact"] { * --pad-card: 24px 28px 32px; --pad-chart: 16px; * --gap-section: 24px; --gap-grid: 10px; * --fact-min-h: 120px; --fact-pad: 12px 14px; * --fact-value: 26px; --chart-h: 280px; * } * body[data-density="brick"] { * --pad-card: 16px 18px 20px; --pad-chart: 10px; * --gap-section: 14px; --gap-grid: 6px; * --fact-min-h: 92px; --fact-pad: 8px 10px; * --fact-value: 20px; --chart-h: 220px; * } * ────────────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', 'Google Sans', system-ui, sans-serif; } body { background: var(--background-color); min-height: 100vh; color: var(--on-surface); -webkit-font-smoothing: antialiased; } /* KYP Logo animations */ @keyframes kypStream { 0%{transform:translateX(0);opacity:0} 15%{opacity:.9} 70%{opacity:.9} 100%{transform:translateX(16px);opacity:0} } @keyframes kypSlitPulse { 0%,100%{opacity:.85} 50%{opacity:1; transform:scaleY(1.05)} } @keyframes kypStepRise { 0%{stroke-dashoffset:32; opacity:.3} 60%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:1} } @keyframes kypArrowPulse{ 0%,100%{opacity:.6; transform:translateY(0)} 50%{opacity:1; transform:translateY(-1px)} } .footer-logo { display: flex; align-items: center; gap: 10px; } .wordmark { display: flex; flex-direction: column; line-height: 1.1; font-family: 'Google Sans', sans-serif; align-items: flex-start; } .wordmark .w1 { font-size: 14px; font-weight: 500; color: var(--on-surface); letter-spacing: -.01em; } .wordmark .w2 { font-size: 10px; font-weight: 400; color: var(--on-surface-secondary); letter-spacing: .08em; text-transform: uppercase; display: flex; align-items: center; gap: 3px; } .wordmark .w2 .material-icons-outlined { font-size: 14px !important; } /* Навигация дашборда вынесена в общий vanilla-компонент scripts/kyp-header.js (Floating Pill, дизайн «вариант E»); он несёт собственные стили. Старые классы .mdc-top-app-bar / .mdc-tab* удалены как осиротевшие. */ /* Main Container */ .mdc-layout { max-width: 1240px; margin: 32px auto; padding: 0 24px; } .mdc-layout__content { background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--outline); padding: var(--pad-card); } /* Dashboard sections */ .dashboard-section { margin-bottom: var(--gap-section); } .dashboard-section + .mdc-footer { margin-top: calc(var(--gap-section) - 16px); } .section-header { margin-top: 16px; margin-bottom: 16px; } .section-header__row { display: flex; align-items: center; gap: 10px; } .section-title { font-size: var(--section-title); font-weight: 500; color: var(--on-surface); font-family: var(--font-display); margin: 0; } .section-subtitle { font-size: 13px; color: var(--on-surface-variant); margin: 4px 0 0 34px; /* 24px icon + 10px gap = aligns with title text */ line-height: 1.6; } .section-hint { font-size: 12px; color: var(--on-surface-variant); margin: 0; padding: 0 0 14px 0; display: flex; align-items: center; gap: 8px; } .section-hint .material-icons, .section-hint .material-icons-outlined { font-size: 16px; } /* Footer */ .mdc-footer { border-top: 1px solid var(--outline); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--on-surface-variant); } .mdc-footer__left { display: flex; align-items: center; gap: 8px; } .mdc-footer__right { display: flex; align-items: center; gap: 6px; } .mdc-footer a { color: var(--accent); text-decoration: none; } .mdc-footer a:hover { text-decoration: underline; } /* Header */ .mdc-typography--headline5 { font-size: 24px; font-weight: 500; line-height: 32px; color: var(--on-surface); margin-bottom: 8px; } .mdc-typography--subtitle1 { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--on-surface-secondary); margin-bottom: 32px; } /* Material Design quote style */ .mdc-quote { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--on-surface-secondary); margin: 24px 0; padding: 16px 20px 16px 40px; border-left: 4px solid var(--primary-color); background-color: rgb(248, 249, 250); border-radius: 0 8px 8px 0; position: relative; font-style: italic; quotes: "“" "”" "‘" "’"; } .mdc-quote::before { content: "format_quote"; font-family: 'Material Icons'; position: absolute; left: 12px; top: 16px; font-size: 20px; color: var(--primary-color); opacity: 0.7; } /* Cards */ .mdc-card { background: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--shadow-1); padding: 24px; transition: var(--transition); border: 1px solid var(--outline); margin-bottom: 24px; } .mdc-card:hover { box-shadow: var(--shadow-2); } .mdc-card__title { font-size: 18px; font-weight: 500; line-height: 24px; color: var(--on-surface); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .mdc-card__title .material-icons { color: var(--primary-color); } .funnel-title-icon, .section-title-icon { width: 24px; height: 24px; margin-right: 0; vertical-align: middle; display: inline-block; flex-shrink: 0; } .funnel-title-icon circle { animation: funnelDrop 1.8s ease-in-out infinite; } .funnel-title-icon circle:nth-child(1) { animation-delay: 0s; } .funnel-title-icon circle:nth-child(2) { animation-delay: 0.6s; } .funnel-title-icon circle:nth-child(3) { animation-delay: 1.2s; } @keyframes funnelDrop { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.4; } 100% { transform: translateY(0); opacity: 1; } } /* Interesting burst - мягкое вращение звезды */ #icon-interesting { animation: burstSpin 3s ease-in-out infinite; transform-origin: center; } @keyframes burstSpin { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } } /* Completion check - пульсация иконки */ #icon-completion { animation: iconPulse 2s ease-in-out infinite; } /* Authors duo - мягкое появление */ #icon-authors { animation: iconFade 2.5s ease-in-out infinite; } /* Teams pulse - пульсация иконки */ #icon-teams { animation: iconPulse 1.5s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes iconFade { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.5; } } /* Funnel Chart */ #funnel-chart { width: 100%; height: 400px; margin-top: 16px; } /* Interesting Section Grid */ .interesting-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; } @media (max-width: 1200px) { .interesting-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .interesting-grid { grid-template-columns: 1fr; } } .interesting-card { background: var(--surface); border-radius: var(--radius-chart); padding: var(--fact-pad); min-height: var(--fact-min-h); border: 1px solid var(--outline-soft); border-left: 4px solid var(--yellow); display: flex; flex-direction: column; gap: 8px; position: relative; transition: box-shadow 0.15s, border-color 0.2s; } .interesting-card:hover { box-shadow: 0 4px 16px rgba(26, 115, 232, 0.15); } .interesting-card__title { font-size: 11px; font-weight: 500; line-height: 1.4; color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.4px; font-family: var(--font-body); } .interesting-card__value { font-size: var(--fact-value); font-weight: 500; line-height: 1.1; letter-spacing: -0.5px; color: var(--on-surface); font-family: var(--font-num); } .interesting-card__value a { color: inherit; text-decoration: none; } .interesting-card__value a:hover { color: var(--accent); text-decoration: none; } /* Metrics list in card */ .metrics-list { list-style: none; padding: 0; margin: 4px 0 0 0; text-align: left; } .metrics-list li { font-size: 13px; line-height: 20px; padding: 2px 0 2px 16px; position: relative; } .metrics-list li::before { content: '•'; position: absolute; left: 4px; color: var(--primary-color); font-weight: bold; } .metrics-list li a { color: var(--on-surface); text-decoration: none; } .metrics-list li a:hover { color: var(--primary-color); text-decoration: none; } .interesting-card__details { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--on-surface-variant); margin-top: auto; /* прижать к нижнему краю */ font-family: var(--font-body); } /* Chart card — подложка блоков с барами */ .chart-card { background: var(--chart-bg); border-radius: var(--radius-chart); border: 1px solid var(--outline-soft); padding: var(--pad-chart); margin-top: 16px; } /* Authors Chart Section */ .authors-chart-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--outline); } #authorsChart, #teamsChart { width: 100% !important; height: 320px !important; display: block; } /* Teams Chart Section */ .teams-chart-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--outline); } /* Closest Completion Section */ .closest-completion-section { /* No extra margins, same as other sections */ } .mdc-card .closest-completion-section { /* No border needed */ } .table-wrapper { margin-top: 16px; border-radius: var(--radius-chart); border: 1px solid var(--outline); overflow: hidden; } #closestCompletionTable { width: 100%; border-collapse: collapse; background: var(--chart-bg); } #closestCompletionTable th { background: var(--surface); color: var(--on-surface-variant); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; text-align: left; padding: var(--row-pad); border-bottom: 1px solid var(--outline); font-family: var(--font-body); } #closestCompletionTable td { padding: var(--row-pad); border-bottom: 1px solid var(--outline-soft); font-size: 13px; color: var(--on-surface); } #closestCompletionTable tr:last-child td { border-bottom: none; } #closestCompletionTable tr:hover td { background-color: var(--grey-light); } /* Status chip */ .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; } .status-chip__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .status-chip--progress { background: var(--blue-light); color: var(--blue); } .status-chip--progress .status-chip__dot { background: var(--blue); } .status-chip--done { background: var(--green-light); color: var(--green); } .status-chip--done .status-chip__dot { background: var(--green); } .progress-cell { width: 200px; } .progress-bar-container { width: 100%; height: 6px; background-color: var(--outline); border-radius: 3px; overflow: hidden; } .progress-bar-fill { height: 100%; background-color: var(--green); border-radius: 3px; transition: width 0.3s ease; } /* Controls */ .controls { display: flex; gap: 12px; margin-bottom: 24px; } .mdc-button { padding: 10px 16px; background: var(--surface-color); color: var(--primary-color); border: 1px solid #e8eaed; border-radius: 20px; font-size: 14px; font-weight: 500; letter-spacing: 0.25px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px; min-height: 40px; } .mdc-button:hover { background: rgba(26, 115, 232, 0.04); border-color: var(--primary-color); } .mdc-button--icon { padding: 10px; min-width: 40px; justify-content: center; } /* Tooltip */ .mdc-tooltip { position: absolute; background: #2d3033; color: #fff; padding: 12px 14px; border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.5; pointer-events: none; z-index: 1000; max-width: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: fadeIn 0.15s ease; } .mdc-tooltip strong { color: #ffffff; font-weight: 500; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Footer */ .mdc-footer { margin-top: 24px; padding: 24px 0; border-top: 1px solid var(--outline); font-size: 13px; color: var(--on-surface-secondary); text-align: center; line-height: 20px; } .mdc-footer a { color: var(--primary-color); text-decoration: none; } .mdc-footer a:hover { text-decoration: underline; } /* Emoji Support */ .emoji { font-size: 1.2em; } /* Changelog Popup */ .changelog-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .changelog-popup-overlay.open { opacity: 1; visibility: visible; } .changelog-popup { background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-3); width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; animation: slideIn 0.3s ease; } .changelog-header { padding: 24px; background: linear-gradient(135deg, var(--grey-light), #e9ecef); border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; } .changelog-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--on-surface); } .changelog-close { width: 32px; height: 32px; border: none; background: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--on-surface-secondary); transition: background-color 0.2s; } .changelog-close:hover { background-color: rgba(0, 0, 0, 0.08); } .changelog-content { padding: 24px; } .changelog-section { margin-bottom: 24px; } .changelog-section-title { font-size: 16px; font-weight: 500; color: var(--on-surface); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .changelog-list { list-style: none; padding: 0; margin: 0; } .changelog-item { margin-bottom: 12px; padding-left: 20px; position: relative; line-height: 1.5; } .changelog-item:before { content: '•'; position: absolute; left: 0; color: var(--primary-color); font-size: 18px; } .changelog-date { font-size: 12px; color: var(--on-surface-secondary); margin-bottom: 4px; font-weight: 500; } .changelog-description { font-size: 14px; color: var(--on-surface); } .changelog-link { color: var(--primary-color); text-decoration: none; } .changelog-link:hover { text-decoration: underline; } /* Tab sections — each gets its own white surface */ .tribe-section, .backlog-section { display: none; /* React компонент сам управляет layout */ } /* Скрываем внутренний nav React-компонента (у нас свой хедер) */ #backlog-root nav { display: none !important; } /* React компонент рендерит собственный white card — убираем наш section-white-container */ /* padding: 0 чтобы не было двойных отступов с отступами самого React-компонента */ .backlog-section .section-white-container { padding: 0; background: transparent; border: none; border-radius: 0; padding: 0; } .tribe-section.active-section, .backlog-section.active-section { display: block; } /* Single white container inside each tab section */ .section-white-container { background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--outline); padding: 40px 48px 40px; } /* Hide dashboard wrapper when other tabs are active */ .mdc-layout__content.hidden { display: none; } .dashboard-content { display: block; } .dashboard-content.hidden { display: none; } .backlog-card { background: var(--grey-light); border-radius: 12px; border: 1px solid var(--outline); padding: 32px 36px 28px; margin-bottom: 20px; position: relative; } .backlog-card h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 500; color: var(--on-surface); } .backlog-card .perspective-block { margin-bottom: 20px; padding-left: 8px; border-left: 3px solid var(--primary-color); } .backlog-card .perspective-block.short-term { border-left-color: var(--red); } .backlog-card .perspective-block.mid-term { border-left-color: var(--yellow); } .backlog-card .perspective-block.long-term { border-left-color: var(--blue); } .backlog-card .perspective-block h4 { margin: 0 0 8px 0; font-size: 14px; font-weight: 500; } .backlog-card .perspective-block ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--on-surface); } .backlog-card .perspective-block ul li { margin-bottom: 3px; } .backlog-card .backlog-meta { font-size: 12px; color: var(--on-surface-variant); margin-bottom: 16px; } .backlog-card .backlog-full-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--primary-color); text-decoration: none; } .backlog-card .backlog-full-link:hover { text-decoration: underline; } .backlog-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .backlog-section-header .section-icon { font-size: 20px; color: var(--primary-color); } .backlog-section-header h2 { margin: 0; font-size: 18px; font-weight: 500; color: var(--on-surface); } .tribe-card { background: var(--chart-bg); border-radius: 12px; border: 1px solid var(--outline-soft); padding: 40px 40px 32px; margin-bottom: 48px; position: relative; overflow: hidden; min-height: 200px; } .tribe-hero-content { width: 52%; } .tribe-hero-rocket { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .tribe-hero-content { width: 100%; } .tribe-hero-rocket { display: none; } } .tribe-mission-title { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--on-surface); margin-bottom: 12px; max-width: 700px; } .tribe-mission-desc { color: var(--on-surface-secondary); font-size: 15px; line-height: 1.6; max-width: 700px; } .tribe-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .tribe-section-header h2 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--on-surface); } .tribe-section-header .section-icon { font-size: 20px; color: var(--accent); } .tribe-goals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; } .tribe-goal-card { background: var(--chart-bg); border-radius: 12px; padding: 24px; border: 1px solid var(--outline-soft); cursor: default; transition: box-shadow 0.2s; } .tribe-goal-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.08); } .tribe-goal-card .goal-icon { font-size: 32px; color: var(--primary-color); margin-bottom: 12px; display: block; } .tribe-goal-card .goal-label { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--on-surface); } .tribe-goal-card .goal-text { font-size: 13px; color: var(--on-surface-secondary); line-height: 1.5; } .tribe-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .tribe-value-card { background: var(--chart-bg); border-radius: 12px; padding: 20px 24px; border: 1px solid var(--outline-soft); display: flex; align-items: flex-start; gap: 14px; } .tribe-value-card .value-icon { font-size: 22px; color: var(--on-surface-secondary); margin-top: 2px; } .tribe-value-card .value-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; color: var(--on-surface); } .tribe-value-card .value-text { font-size: 13px; color: var(--on-surface-secondary); line-height: 1.5; } .tribe-squads-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; } .tribe-squad-card { background: var(--chart-bg); border-radius: 12px; border: 1px solid var(--outline-soft); overflow: hidden; transition: box-shadow 0.2s; } .tribe-squad-card:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.08); } .tribe-squad-header { padding: 20px 24px; cursor: pointer; display: flex; align-items: center; gap: 14px; user-select: none; } .tribe-squad-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tribe-squad-icon span { font-size: 22px; } .tribe-squad-info { flex: 1; } .tribe-squad-name { font-weight: 500; font-size: 15px; color: var(--on-surface); } .tribe-squad-lead { font-size: 13px; color: var(--on-surface-secondary); } .tribe-squad-count { font-size: 12px; color: var(--on-surface-secondary); background: #f1f3f4; border-radius: 12px; padding: 2px 10px; } .tribe-squad-arrow { color: var(--on-surface-secondary); font-size: 20px; transition: transform 0.2s; } .tribe-squad-arrow.open { transform: rotate(180deg); } .tribe-squad-members { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .tribe-squad-members.open { max-height: 600px; } .tribe-squad-members-inner { padding: 0 24px 20px; border-top: 1px solid var(--outline); background: var(--chart-bg); } .tribe-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .tribe-member-row:not(:last-child) { border-bottom: 1px solid #f1f3f4; } .tribe-member-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; flex-shrink: 0; } .tribe-member-name { font-size: 14px; color: var(--on-surface); } .tribe-member-role { font-size: 12px; color: var(--on-surface-secondary); } .tribe-total-badge { background: var(--blue-light); color: var(--primary-color); font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 12px; } .tribe-skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .tribe-skill-category { background: var(--chart-bg); border-radius: 12px; padding: 24px; border: 1px solid var(--outline-soft); } .tribe-skill-cat-badge { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 14px; margin-bottom: 20px; font-size: 13px; font-weight: 500; } .tribe-skill-row { margin-bottom: 14px; } .tribe-skill-row:last-child { margin-bottom: 0; } .tribe-skill-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 13px; color: var(--on-surface-secondary); } .tribe-skill-label span:last-child { font-weight: 500; color: var(--on-surface); } .tribe-skill-bar-bg { height: 6px; border-radius: 3px; background: #f1f3f4; overflow: hidden; } .tribe-skill-bar-fill { height: 100%; border-radius: 3px; width: 0%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } @media (max-width: 768px) { .tribe-squads-grid, .tribe-skills-grid { grid-template-columns: 1fr; } .tribe-values-grid { grid-template-columns: 1fr; } } .auth-hidden { display: none !important; } #auth-submit { background-color: var(--primary-color); cursor: pointer; } #auth-submit:disabled { background-color: var(--grey); cursor: not-allowed; } .badge { display: inline-flex; align-items: center; background: var(--grey-light); color: var(--on-surface-variant); font-size: 12px; font-weight: 400; font-family: var(--font-body); padding: 2px 10px; border-radius: 12px; vertical-align: middle; margin-left: 4px; line-height: 1.4; white-space: nowrap; } .badge:hover { background: var(--outline-soft) !important; color: var(--on-surface-variant) !important; } /* === Backlog Analysis Selectors === */ .backlog-selectors { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .backlog-selector-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 240px; } .backlog-selector-group label { font-size: 13px; font-weight: 500; color: var(--on-surface-secondary); letter-spacing: 0.3px; } .backlog-selector-group select { padding: 10px 14px; border: 1px solid var(--outline); border-radius: var(--border-radius-small); font-size: 14px; font-family: 'Roboto', 'Google Sans', sans-serif; color: var(--on-surface); background: var(--surface-color); cursor: pointer; transition: var(--transition); appearance: auto; min-height: 42px; } .backlog-selector-group select:hover { border-color: var(--primary-color); } .backlog-selector-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.15); } /* === Backlog Summary View === */ .backlog-summary-area { margin-bottom: 28px; } .backlog-empty-state { text-align: center; padding: 48px 24px; color: var(--on-surface-secondary); } .backlog-empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .backlog-empty-state h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--on-surface); } .backlog-empty-state p { font-size: 14px; line-height: 1.5; max-width: 400px; margin: 0 auto; } /* === CFD Chart === */ .cfd-container { margin-top: 0; } .cfd-chart-wrapper { position: relative; width: 100%; height: 350px; margin-top: 16px; background: var(--background-color); border-radius: var(--border-radius-small); padding: 12px; } #cfdChart { width: 100% !important; height: 100% !important; } /* Colors for CFD streams */ .backlog-stream-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: 500; } /* Summary metrics row */ .backlog-summary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; } .backlog-metric-card { background: var(--surface-color); border-radius: var(--border-radius-small); padding: 16px 20px; border: 1px solid var(--outline); } .backlog-metric-card .metric-label { font-size: 12px; font-weight: 500; color: var(--on-surface-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .backlog-metric-card .metric-value { font-size: 24px; font-weight: 500; color: var(--on-surface); } .backlog-metric-card .metric-sub { font-size: 12px; color: var(--on-surface-secondary); margin-top: 2px; } /* Stream/Team selection mode toggle */ .backlog-mode-toggle { display: flex; gap: 8px; margin-bottom: 20px; } .backlog-mode-btn { padding: 8px 16px; border: 1px solid var(--outline); border-radius: 20px; background: var(--surface-color); color: var(--on-surface-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); } .backlog-mode-btn.active { background: var(--blue-light); border-color: var(--primary-color); color: var(--primary-color); } .backlog-mode-btn:hover { border-color: var(--primary-color); } @media (max-width: 768px) { .backlog-selectors { flex-direction: column; } .backlog-selector-group { min-width: 100%; } .backlog-summary-metrics { grid-template-columns: repeat(2, 1fr); } .backlog-metrics-grid, .backlog-charts-grid-2, .backlog-patterns-grid, .backlog-aging-grid { grid-template-columns: 1fr !important; } .backlog-horizons-grid { grid-template-columns: 1fr !important; } } /* === V2 Design: Section Badge === */ .section-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-light); color: var(--purple); border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; margin-left: 12px; } .section-badge .material-icons { font-size: 14px; } /* === V2 Design: Filter Pill === */ .backlog-filter-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-light); color: var(--primary-color); border-radius: 20px; padding: 6px 16px; font-size: 13px; font-weight: 500; margin-bottom: 24px; } .backlog-filter-pill .material-icons { font-size: 16px; } /* === V2 Design: Horizon Summary Cards === */ .backlog-horizons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; } .horizon-card { background: var(--surface-color); border: 1px solid var(--outline); border-radius: 12px; padding: 20px; transition: box-shadow 0.2s; border-top: 3px solid var(--primary-color); } .horizon-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .horizon-card.short-term { border-top-color: var(--red); } .horizon-card.mid-term { border-top-color: var(--yellow); } .horizon-card.long-term { border-top-color: var(--blue); } .horizon-card .horizon-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .horizon-card .horizon-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .horizon-card .horizon-icon.short-term-bg { background: var(--red-light); } .horizon-card .horizon-icon.mid-term-bg { background: var(--yellow-light); } .horizon-card .horizon-icon.long-term-bg { background: var(--blue-light); } .horizon-card .horizon-title { font-size: 14px; font-weight: 500; color: var(--on-surface); } .horizon-card .horizon-range { font-size: 12px; color: var(--on-surface-secondary); } .horizon-card .horizon-text { font-size: 13px; line-height: 1.5; color: var(--on-surface); margin-bottom: 12px; } .horizon-card .horizon-metrics { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid #f1f3f4; } .horizon-card .horizon-metric-item { text-align: center; flex: 1; } .horizon-card .horizon-metric-item .hm-value { font-size: 18px; font-weight: 500; color: var(--on-surface); } .horizon-card .horizon-metric-item .hm-label { font-size: 11px; color: var(--on-surface-secondary); margin-top: 2px; } /* === V2 Design: Flow Metrics Tiles === */ .backlog-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } @media (max-width: 900px) { .backlog-metrics-grid { grid-template-columns: repeat(2, 1fr); } } .flow-tile { background: var(--surface-color); border: 1px solid var(--outline); border-radius: 10px; padding: 16px 18px; } .flow-tile .tile-label { font-size: 12px; font-weight: 500; color: var(--on-surface-secondary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; } .flow-tile .tile-value-row { display: flex; align-items: baseline; gap: 8px; } .flow-tile .tile-value { font-size: 26px; font-weight: 500; color: var(--on-surface); } .flow-tile .tile-unit { font-size: 14px; color: var(--on-surface-secondary); } .flow-tile .tile-trend { font-size: 12px; font-weight: 500; margin-top: 4px; } .flow-tile .tile-trend.up { color: var(--green); } .flow-tile .tile-trend.down { color: var(--red); } .flow-tile .tile-trend.neutral { color: var(--on-surface-secondary); } .flow-tile .tile-trend .material-icons { font-size: 14px; vertical-align: middle; } .flow-tile .tile-hint { font-size: 11px; color: var(--on-surface-secondary); margin-top: 2px; } /* === V2 Design: Chart Card === */ .backlog-chart-card { background: var(--surface-color); border: 1px solid var(--outline); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .backlog-chart-card .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .backlog-chart-card .chart-header-left { display: flex; align-items: center; gap: 10px; } .backlog-chart-card .chart-title { font-size: 15px; font-weight: 500; color: var(--on-surface); } .backlog-chart-card .chart-subtitle { font-size: 12px; color: var(--on-surface-secondary); } .backlog-chart-card .chart-body { width: 100%; height: 280px; position: relative; } .backlog-chart-card .chart-body svg { width: 100%; height: 100%; } .backlog-charts-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .backlog-charts-grid-2 .backlog-chart-card .chart-body { height: 220px; } @media (max-width: 900px) { .backlog-charts-grid-2 { grid-template-columns: 1fr; } } /* === V2 Design: Aging WIP === */ .backlog-aging-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 900px) { .backlog-aging-grid { grid-template-columns: 1fr; } } .aging-wip-bar { height: 36px; border-radius: 6px; position: relative; margin: 12px 0 16px; display: flex; overflow: hidden; } .aging-wip-bar .aging-zone { height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(0,0,0,0.5); font-weight: 500; transition: width 0.5s; } .aging-wip-bar .aging-zone.zone-fast { background: #e6f4ea; } .aging-wip-bar .aging-zone.zone-normal { background: var(--yellow-light); } .aging-wip-bar .aging-zone.zone-slow { background: var(--red-light); } .aging-wip-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .aging-wip-items .wip-dot { width: 10px; height: 10px; border-radius: 50%; position: relative; cursor: pointer; transition: transform 0.15s; } .aging-wip-items .wip-dot:hover { transform: scale(2.5); z-index: 5; } .aging-wip-items .wip-dot .wip-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #202124; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; z-index: 10; pointer-events: none; } .aging-wip-items .wip-dot:hover .wip-tooltip { display: block; } .aging-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--on-surface-secondary); } .aging-legend .leg-item { display: flex; align-items: center; gap: 6px; } .aging-legend .leg-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* === V2 Design: SLE Block === */ .sle-distribution { display: flex; align-items: stretch; gap: 0; height: 32px; border-radius: 6px; overflow: hidden; margin: 12px 0; } .sle-distribution .sle-segment { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: rgba(0,0,0,0.6); } .sle-distribution .sle-segment.seg-fast { background: #e6f4ea; } .sle-distribution .sle-segment.seg-on-target { background: var(--blue-light); } .sle-distribution .sle-segment.seg-warning { background: var(--yellow-light); } .sle-distribution .sle-segment.seg-overdue { background: var(--red-light); } .sle-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f3f4; } .sle-row:last-child { border-bottom: none; } .sle-row .sle-percentile { font-size: 13px; font-weight: 500; color: var(--on-surface); min-width: 40px; } .sle-row .sle-label { font-size: 12px; color: var(--on-surface-secondary); flex: 1; } .sle-row .sle-value { font-size: 13px; font-weight: 500; color: var(--primary-color); min-width: 40px; text-align: right; } .sle-row .sle-status { font-size: 12px; padding: 2px 10px; border-radius: 12px; min-width: 60px; text-align: center; } .sle-row .sle-status.ok { background: #e6f4ea; color: #1e7e34; } .sle-row .sle-status.warn { background: var(--yellow-light); color: #e37400; } .sle-row .sle-status.bad { background: var(--red-light); color: #c62828; } .sle-recommendation { margin-top: 12px; padding: 10px 14px; background: var(--grey-light); border-radius: 8px; font-size: 13px; color: var(--on-surface-secondary); line-height: 1.5; border-left: 3px solid var(--primary-color); } /* === V2 Design: Pattern Cards === */ .backlog-patterns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 900px) { .backlog-patterns-grid { grid-template-columns: 1fr; } } .pattern-card { background: var(--surface-color); border: 1px solid var(--outline); border-radius: 10px; padding: 16px; transition: box-shadow 0.2s; } .pattern-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .pattern-card .pattern-name { font-size: 13px; font-weight: 500; color: var(--on-surface); margin-bottom: 4px; } .pattern-card .pattern-desc { font-size: 12px; color: var(--on-surface-secondary); line-height: 1.5; } .pattern-card .pattern-svg { margin-bottom: 10px; width: 100%; height: 48px; } /* === V2 Design: Stream Tag === */ .stream-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 12px; font-weight: 500; } .stream-tag.product { background: #e6f4ea; color: #1e7e34; } .stream-tag.inhouse { background: var(--purple-light); color: #7b1fa2; } .stream-tag.platform { background: var(--blue-light); color: #1565c0; } .stream-tag.landscape { background: var(--yellow-light); color: #e37400; } .stream-tag.support { background: #f5f5f5; color: #616161; } /* === V2 Design: Legend dots === */ .legend-row { display: flex; align-items: center; gap: 16px; margin: 8px 0; font-size: 12px; color: var(--on-surface-secondary); } .legend-row .leg-item { display: flex; align-items: center; gap: 6px; } .legend-row .leg-dot { width: 10px; height: 10px; border-radius: 2px; } /* === V2 Design: Selector with icon enhancement === */ .backlog-selector-group .select-wrapper { position: relative; } .backlog-selector-group .select-wrapper .select-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--on-surface-secondary); pointer-events: none; z-index: 1; } .backlog-selector-group select.with-icon { padding-left: 38px; } /* === V2 Design: Divider === */ .backlog-divider { border: none; border-top: 1px solid var(--outline); margin: 24px 0; } /* === Anthropic V2 Design === */ :root { --primary-color: #1a73e8; --google-blue: #1a73e8; --google-red: #c5221f; --google-yellow: #e37400; --google-green: #1e8e3e; } /* backlog-v2-container — visual card removed (section-white-container handles it) */ .backlog-v2-container { margin-top: 0; } .backlog-v2-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--purple-light); color: var(--purple); border-radius: 10px; padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.3px; } .backlog-v2-badge .material-icons-outlined, .backlog-v2-badge .material-icons { font-size: 14px; } .backlog-v2-section-desc { font-size: 13px; color: var(--on-surface-variant); margin: 4px 0 20px 0; line-height: 1.5; padding-left: 34px; } .backlog-v2-selectors { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; } .backlog-v2-selector-group { display: flex; flex-direction: column; gap: 6px; flex: 0 1 280px; min-width: 180px; } .backlog-v2-selector-group label { font-size: 12px; font-weight: 400; color: var(--on-surface-variant); } .backlog-v2-selector-group .select-wrapper { position: relative; display: flex; align-items: center; } .backlog-v2-selector-group .select-wrapper .select-left-icon { position: absolute; left: 12px; font-size: 18px; color: var(--on-surface-variant); pointer-events: none; z-index: 1; } .backlog-v2-selector-group .select-wrapper .select-arrow { position: absolute; right: 12px; font-size: 20px; color: var(--on-surface-variant); pointer-events: none; z-index: 1; } .backlog-v2-selector-group select { padding: 10px 36px 10px 38px; border: 1px solid var(--outline-soft); border-radius: var(--radius-chart); font-size: 14px; font-family: var(--font-body); color: var(--on-surface); background: var(--surface); cursor: pointer; transition: var(--transition); appearance: none; -webkit-appearance: none; min-height: 42px; width: 100%; } .backlog-v2-selector-group select:hover { border-color: var(--accent); } .backlog-v2-selector-group select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.12); } .backlog-v2-filter-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-light); color: var(--accent); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 500; margin-left: auto; white-space: nowrap; } .backlog-v2-filter-pill .material-icons, .backlog-v2-filter-pill .material-icons-outlined { font-size: 16px; } /* Horizon tabs */ .backlog-v2-horizon-tabs { background: var(--chart-bg); border: 1px solid var(--outline-soft); border-radius: var(--radius-chart); padding: 20px; margin-bottom: 24px; } .horizon-tab-nav { display: flex; gap: 8px; border-bottom: 1px solid var(--outline); padding-bottom: 12px; margin-bottom: 16px; } .horizon-tab { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--on-surface-variant); transition: var(--transition); } .horizon-tab:hover { background: var(--grey-light); color: var(--on-surface); } .horizon-tab.active.short { background: var(--red-light); color: var(--red); } .horizon-tab.active.mid { background: var(--yellow-light); color: var(--yellow); } .horizon-tab.active.long { background: var(--blue-light); color: var(--blue); } .horizon-tab .material-icons-outlined { font-size: 18px; } .horizon-tab-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 600; } .horizon-tab-badge.short { background: var(--red-light); color: var(--red); } .horizon-tab-badge.mid { background: var(--yellow-light); color: var(--yellow); } .horizon-tab-badge.long { background: var(--blue-light); color: var(--blue); } .horizon-tab-content { min-height: 80px; max-height: 400px; overflow-y: auto; font-size: 14px; line-height: 1.7; color: var(--on-surface); } /* Flow metric tiles */ .backlog-v2-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } @media (max-width: 900px) { .backlog-v2-metrics-grid { grid-template-columns: repeat(2, 1fr); } } .flow-tile-v2 { background: var(--chart-bg); border: 1px solid var(--outline-soft); border-radius: var(--radius-chart); padding: 20px; } .flow-tile-v2 .tile-label { font-size: 12px; font-weight: 400; color: var(--on-surface-variant); margin-bottom: 8px; } .flow-tile-v2 .tile-value-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .flow-tile-v2 .tile-value { font-size: 28px; font-weight: 500; } .flow-tile-v2 .tile-unit { font-size: 13px; color: var(--on-surface-variant); } .flow-tile-v2 .tile-trend { font-size: 12px; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 4px; } .flow-tile-v2 .tile-trend.up { color: var(--green); } .flow-tile-v2 .tile-trend.down { color: var(--red); } .flow-tile-v2 .tile-trend.neutral { color: var(--on-surface-variant); } .flow-tile-v2 .tile-trend .material-icons-outlined { font-size: 14px; } .flow-tile-v2 .tile-hint { font-size: 11px; color: var(--on-surface-variant); margin-top: 4px; } /* Chart cards */ .backlog-v2-chart-card { background: var(--chart-bg); border: 1px solid var(--outline-soft); border-radius: var(--radius-chart); padding: 24px; margin-bottom: 20px; } .backlog-v2-chart-card .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .backlog-v2-chart-card .chart-header-left { display: flex; align-items: center; gap: 10px; } .backlog-v2-chart-card .chart-title { font-size: 18px; font-weight: 500; color: var(--on-surface); font-family: var(--font-display); } .backlog-v2-chart-card .chart-title .material-icons-outlined { font-size: 20px; color: var(--accent); vertical-align: middle; margin-right: 2px; } .backlog-v2-chart-card .chart-subtitle { font-size: 12px; color: var(--on-surface-variant); } .backlog-v2-chart-card .chart-body { width: 100%; height: 280px; position: relative; } .backlog-v2-chart-card .chart-body svg { width: 100%; height: 100%; } .backlog-v2-charts-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .backlog-v2-charts-grid-2 .backlog-v2-chart-card .chart-body { height: 220px; } @media (max-width: 900px) { .backlog-v2-charts-grid-2 { grid-template-columns: 1fr; } } .backlog-v2-aging-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 900px) { .backlog-v2-aging-grid { grid-template-columns: 1fr; } } .backlog-v2-patterns-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { .backlog-v2-patterns-grid { grid-template-columns: 1fr; } } .pattern-card-v2 { background: var(--grey-light); border-radius: 10px; padding: 16px; border: 1px solid var(--outline); } .pattern-card-v2 .pattern-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; color: var(--on-surface); } .pattern-card-v2 .pattern-desc { font-size: 12px; line-height: 1.5; color: var(--on-surface-secondary); } .pattern-card-v2 .pattern-icon { font-size: 24px; margin-bottom: 8px; display: block; } .backlog-v2-summary-card { background: #fff; border: 1px solid var(--outline); border-radius: 12px; padding: 20px; margin-bottom: 20px; } .backlog-v2-summary-card .summary-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .backlog-v2-summary-card .summary-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .backlog-v2-summary-card .summary-title { font-size: 15px; font-weight: 500; color: var(--on-surface); } .backlog-v2-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } @media (max-width: 900px) { .backlog-v2-insights { grid-template-columns: 1fr; } } .backlog-v2-insight { background: var(--grey-light); border-radius: 10px; padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; } .backlog-v2-insight .insight-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; } .backlog-v2-insight .insight-icon.green { color: #1e8e3e; } .backlog-v2-insight .insight-icon.amber { color: #e37400; } .backlog-v2-insight .insight-icon.red { color: #c5221f; } .backlog-v2-insight .insight-text { font-size: 13px; line-height: 1.5; color: var(--on-surface); } .backlog-v2-insight .insight-label { font-size: 11px; font-weight: 500; color: var(--on-surface-secondary); text-transform: uppercase; letter-spacing: 0.3px; } @media (max-width: 768px) { .backlog-v2-selectors { flex-direction: column; } .backlog-v2-selector-group { min-width: 100%; } .backlog-v2-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; } .backlog-v2-charts-grid-2, .backlog-v2-patterns-grid, .backlog-v2-aging-grid { grid-template-columns: 1fr !important; } .horizon-tab-nav { flex-direction: column; } .backlog-v2-insights { grid-template-columns: 1fr !important; } }