/* ============================================ DocVault Popup — Premium Dark Theme ============================================ */ :root { --bg: #070b14; --bg2: #0d1424; --card: #131c2e; --card-h: #1a2540; --brd: #1e2d4a; --brd-l: #2a3f66; --tx: #e8edf5; --tx-m: #7a8ba8; --tx-d: #4a5d7a; --acc: #10b981; --acc-l: #34d399; --acc-d: #059669; --bg-glass: rgba(7,11,20,0.85); --c-run: #14b8a6; --c-env: #06b6d4; --c-tc: #f59e0b; --c-kn: #f43f5e; --c-task: #8b5cf6; --c-bug: #ef4444; --c-tp: #3b82f6; --c-testrun: #f97316; --c-api: #ec4899; --c-cred: #eab308; --c-rel: #a855f7; --radius: 8px; --radius-sm: 5px; --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="light"] { --bg: #f0f4f8; --bg2: #f8fafc; --card: #ffffff; --card-h: #f0f4f8; --brd: #dde3ec; --brd-l: #c1cfe0; --tx: #0e1a2d; --tx-m: #3d5068; --tx-d: #6b7fa0; --acc: #059669; --acc-l: #10b981; --acc-d: #047857; --bg-glass: rgba(240,244,248,0.85); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Sprint 25b: removed the dead Chrome-extension-popup body rule (hardcoded 380x500 + flex-centering — this app hasn't been a popup for a long time; the live layout is index.html's own ) and its now-unused Typography rule. Confirmed zero usage of .popup-* / .popup selectors anywhere in index.html or js/*.js before removing. */ /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--brd-l); } /* ============================================ Search ============================================ */ /* ============================================ Empty / No Results States ============================================ */ .hidden { display: none !important; } /* Code Block Copy Button */ .code-copy-btn { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--tx); font-size: 13px; padding: 5px 10px; border-radius: 6px; cursor: pointer; opacity: 0.6; z-index: 10; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .code-copy-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } /* TUI Editor Custom Theme Overrides */ .toastui-editor-dark .toastui-editor-defaultUI { border-color: var(--brd) !important; border-radius: 8px !important; overflow: hidden; } .toastui-editor-dark .toastui-editor-toolbar { background-color: var(--bg2) !important; border-bottom-color: var(--brd) !important; } .toastui-editor-dark .toastui-editor-defaultUI-toolbar { background-color: var(--bg2) !important; border-bottom-color: var(--brd) !important; } .toastui-editor-dark .toastui-editor-md-container, .toastui-editor-dark .toastui-editor-ww-container { background-color: var(--bg) !important; } .toastui-editor-dark .toastui-editor-md-splitter { background-color: var(--brd) !important; } .toastui-editor-dark .toastui-editor-contents { font-family: 'DM Sans', sans-serif !important; color: var(--tx) !important; } .toastui-editor-dark .toastui-editor-contents h1, .toastui-editor-dark .toastui-editor-contents h2, .toastui-editor-dark .toastui-editor-contents h3, .toastui-editor-dark .toastui-editor-contents h4, .toastui-editor-dark .toastui-editor-contents h5, .toastui-editor-dark .toastui-editor-contents h6 { font-family: 'Space Grotesk', sans-serif !important; color: var(--tx) !important; border-bottom-color: var(--brd) !important; } .toastui-editor-dark .ProseMirror { font-family: 'DM Sans', sans-serif !important; color: var(--tx) !important; } /* Fix popup background in toolbar */ .toastui-editor-dark .toastui-editor-popup { background-color: var(--card) !important; border-color: var(--brd) !important; } .toastui-editor-dark .toastui-editor-popup-body { background-color: var(--card) !important; } .toastui-editor-dark .toastui-editor-dropdown-toolbar { background-color: var(--card) !important; border-color: var(--brd) !important; } /* Minimalist Toolbar Icons */ .toastui-editor-dark .toastui-editor-toolbar-icons { border: none !important; background-color: transparent !important; opacity: 0.6; transition: opacity 0.2s, background-color 0.2s; border-radius: 4px !important; } .toastui-editor-dark .toastui-editor-toolbar-icons:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.05) !important; } .toastui-editor-dark .toastui-editor-toolbar-icons.active { opacity: 1; background-color: rgba(255, 255, 255, 0.1) !important; } .toastui-editor-dark .toastui-editor-toolbar-divider { background-color: var(--brd) !important; width: 1px !important; margin: 0 4px !important; } /* Minimalist Mode Switch */ .toastui-editor-dark .toastui-editor-mode-switch { background-color: transparent !important; border-top-color: var(--brd) !important; } .toastui-editor-dark .toastui-editor-mode-switch .tab-item { border: none !important; background-color: transparent !important; color: var(--tx-m) !important; opacity: 0.6; transition: opacity 0.2s, color 0.2s; } .toastui-editor-dark .toastui-editor-mode-switch .tab-item.active { opacity: 1; color: var(--acc) !important; font-weight: 600; } /* Make toolbar icons smaller */ .toastui-editor-dark .toastui-editor-toolbar-icons { transform: scale(0.85); } .toastui-editor-dark .toastui-editor-toolbar { height: 40px !important; } .toastui-editor-dark .toastui-editor-defaultUI-toolbar { padding: 0 8px !important; } /* Restore Tailwind reset for TUI Editor contents */ .toastui-editor-dark .toastui-editor-contents h1 { font-size: 2em !important; font-weight: 700 !important; margin-bottom: 0.5em !important; } .toastui-editor-dark .toastui-editor-contents h2 { font-size: 1.5em !important; font-weight: 600 !important; margin-bottom: 0.5em !important; } .toastui-editor-dark .toastui-editor-contents h3 { font-size: 1.25em !important; font-weight: 600 !important; margin-bottom: 0.5em !important; } .toastui-editor-dark .toastui-editor-contents h4 { font-size: 1.1em !important; font-weight: 600 !important; } .toastui-editor-dark .toastui-editor-contents strong { font-weight: 700 !important; } .toastui-editor-dark .toastui-editor-contents ul { list-style-type: disc !important; padding-left: 1.5em !important; margin-bottom: 1em !important; } .toastui-editor-dark .toastui-editor-contents ol { list-style-type: decimal !important; padding-left: 1.5em !important; margin-bottom: 1em !important; } .toastui-editor-dark .toastui-editor-contents blockquote { border-left: 4px solid var(--brd) !important; padding-left: 1em !important; color: var(--tx-m) !important; } .toastui-editor-dark .toastui-editor-contents a { color: var(--acc) !important; text-decoration: underline !important; } /* Search Modal Styles */ .search-item { padding: 12px 16px; border-bottom: 1px solid var(--brd); cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; gap: 4px; } .search-item:last-child { border-bottom: none; } .search-item:hover, .search-item.active { background: var(--card-h); } .search-item.active { border-left: 3px solid var(--acc); padding-left: 13px; } .search-item-title { font-size: 14px; font-weight: 600; color: var(--tx); } .search-item-meta { font-size: 11px; color: var(--tx-m); display: flex; align-items: center; gap: 8px; } .search-item-match { color: var(--acc); background: rgba(16,185,129,0.1); padding: 0 3px; border-radius: 2px; } /* Search Filter Bar */ .search-filter-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--brd); overflow-x: auto; scrollbar-width: none; } .search-filter-bar::-webkit-scrollbar { display: none; } .search-filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--brd); font-size: 11px; font-weight: 500; color: var(--tx-m); background: var(--bg2); cursor: pointer; white-space: nowrap; transition: all .15s; } .search-filter-chip:hover { background: var(--card-h); color: var(--tx); } /* Dashboard — decision-first QA command center */ .dashboard-hero { display: flex; align-items: center; padding: 2px 2px 16px; } .dashboard-eyebrow { color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .dashboard-intro { color: var(--tx-d); font-size: 12px; margin-top: 4px; } .dashboard-section-head { margin-bottom: 12px; } .dashboard-section-head h3 { color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 650; } .dashboard-section-head p { color: var(--tx-d); font-size: 11px; margin-top: 3px; } .dashboard-attention { align-items: center; background: var(--card); border: 1px solid var(--brd); border-radius: 14px; display: grid; gap: 18px; grid-template-columns: minmax(220px, .72fr) minmax(0, 2fr); margin-bottom: 24px; padding: 14px 16px; } .dashboard-attention.has-items { border-color: rgba(248,113,113,.28); } .dashboard-attention.is-clear { border-color: rgba(52,211,153,.2); } .attention-head { align-items: flex-start; display: flex; gap: 10px; min-width: 0; } .attention-head h3 { color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 650; } .attention-head p { color: var(--tx-d); font-size: 10.5px; line-height: 1.4; margin-top: 3px; } .attention-head-icon { align-items: center; background: rgba(248,113,113,.12); border-radius: 8px; color: #f87171; display: flex; flex-shrink: 0; font-size: 11px; height: 30px; justify-content: center; width: 30px; } .is-clear .attention-head-icon { background: rgba(52,211,153,.12); color: #34d399; } .attention-count { align-items: center; background: rgba(248,113,113,.12); border-radius: 999px; color: #f87171; display: flex; flex-shrink: 0; font-size: 10px; font-weight: 700; height: 23px; justify-content: center; min-width: 23px; padding: 0 6px; } .attention-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); min-width: 0; } .attention-item { align-items: center; background: var(--bg2); border: 1px solid var(--brd); border-radius: 10px; color: inherit; cursor: pointer; display: flex; gap: 10px; min-width: 0; padding: 10px 11px; text-align: left; transition: background .15s ease, border-color .15s ease, transform .15s ease; width: 100%; } .attention-item:hover { background: var(--card-h); border-color: var(--brd-l); transform: translateY(-1px); } .attention-item:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .attention-icon { align-items: center; border-radius: 8px; display: flex; flex-shrink: 0; font-size: 11px; height: 30px; justify-content: center; width: 30px; } .attention-label, .attention-title, .attention-meta { display: block; } .attention-label { font-size: 9px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; } .attention-title { color: var(--tx); font-size: 11.5px; font-weight: 600; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-meta { color: var(--tx-d); font-size: 9.5px; margin-top: 1px; } .attention-arrow { color: var(--tx-d); flex-shrink: 0; font-size: 8px; opacity: .55; } .attention-clear { background: rgba(52,211,153,.06); border: 1px solid rgba(52,211,153,.12); border-radius: 10px; padding: 10px 12px; } .dashboard-snapshot { margin-top: 0; } .dashboard-insights { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .insight-card { background: var(--card); border: 1px solid var(--brd); border-radius: 14px; color: var(--tx); cursor: pointer; min-height: 194px; overflow: hidden; padding: 16px; position: relative; text-align: left; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .insight-card::before { background: var(--insight-color); content: ''; height: 2px; left: 0; opacity: .9; position: absolute; right: 0; top: 0; } .insight-card:hover { background: var(--card-h); border-color: var(--brd-l); transform: translateY(-2px); } .insight-card:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } .insight-card-icon { align-items: center; background: color-mix(in srgb, var(--insight-color) 12%, transparent); border-radius: 8px; color: var(--insight-color); display: flex; font-size: 11px; height: 27px; justify-content: center; position: absolute; right: 14px; top: 13px; width: 27px; } .insight-card-label { color: var(--tx-d); display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding-right: 32px; text-transform: uppercase; } .insight-card > strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 26px; line-height: 1.05; margin-top: 8px; } .insight-card > small { color: var(--tx-d); display: block; font-size: 9.5px; min-height: 14px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-segments { background: var(--brd); border-radius: 999px; display: flex; height: 5px; margin-top: 17px; overflow: hidden; width: 100%; } .insight-legend { display: grid; gap: 7px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; } .insight-legend span { align-items: center; display: grid; gap: 5px; grid-template-columns: 6px minmax(0, 1fr) auto; min-width: 0; } .insight-legend i { border-radius: 50%; height: 5px; width: 5px; } .insight-legend em { color: var(--tx-m); font-size: 9.5px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-legend b { color: var(--tx); font-size: 9.5px; font-weight: 650; font-variant-numeric: tabular-nums; } .insight-modules { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .insight-module-row { align-items: center; display: grid; gap: 7px; grid-template-columns: 45px minmax(0, 1fr) 28px; } .insight-module-row em { color: var(--tx-m); font-size: 9px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insight-module-row > i { background: var(--brd); border-radius: 999px; height: 4px; overflow: hidden; } .insight-module-row > i > b { border-radius: 999px; display: block; height: 100%; } .insight-module-row > strong { color: var(--tx-m); font-size: 9px; text-align: right; } .insight-empty { color: var(--tx-d); font-size: 10px; padding-top: 8px; } .dashboard-trends { margin-top: 30px; } .dashboard-trends .doc-card:hover { background: var(--card); border-color: var(--brd); box-shadow: none; transform: none; } .trend-card { contain: layout paint style; content-visibility: auto; contain-intrinsic-size: auto 205px; } .trend-card-head { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 12px; min-height: 20px; } .trend-estimate { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.2); border-radius: 999px; color: #fbbf24; flex-shrink: 0; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; text-transform: uppercase; } .trend-lifecycle-block { border-top: 1px solid var(--brd); margin-top: 20px; padding-top: 18px; } .trend-lifecycle-head { margin-bottom: 12px; } .trend-lifecycle-head h4 { color: var(--tx); font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 650; } .trend-lifecycle-head p { color: var(--tx-d); font-size: 10.5px; margin-top: 3px; } /* Two prior attempts tried to make the 2-column Lifecycle cards match the 3-column Trends cards' on-screen height after the fact — first by stretching the outer box (CSS aspect-ratio), then by computing a shorter SVG viewBox in JS. Both left small residual mismatches (the SVG's own preserveAspectRatio="none" scaling and gridline-count differences between the two lifecycle charts don't cancel out exactly at every width). This forces byte-for-byte the same column width formula the Trends grid uses (gap-4 = 16px, 3 columns), so each Lifecycle card is the exact same box as a Trends card — same viewBox, same font, same gridlines, no compensation needed. The row is intentionally narrower than the full container instead of stretching to fill it. */ .trend-lifecycle-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, calc((100% - 32px) / 3)); } .trend-lifecycle-grid > .doc-card { display: flex; flex-direction: column; } .trend-caption { color: var(--tx-m); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 14px; margin-top: auto; padding-top: 10px; } .trend-dual-legend { display: flex; gap: 14px; justify-content: flex-end; margin-top: -3px; } .trend-dual-legend span { align-items: center; color: var(--tx-d); display: inline-flex; font-size: 9px; gap: 5px; } .trend-dual-legend i { border-radius: 50%; height: 5px; width: 5px; } /* Release Readiness Cockpit */ .release-policy-card { background: rgba(168,85,247,.055); border: 1px solid rgba(168,85,247,.22); border-radius: 11px; padding: 14px; } .release-policy-head { align-items:flex-start; display:flex; gap:12px; justify-content:space-between; margin-bottom:13px; } .release-policy-head strong { color:var(--tx); display:block; font-size:13px; } .release-policy-head p { color:var(--tx-d); font-size:10.5px; margin:2px 0 0; } .release-policy-head > i { color:var(--c-rel); margin-top:2px; } .release-policy-grid { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); } .release-policy-rate,.release-policy-toggle { align-items:center; background:var(--card); border:1px solid var(--brd); border-radius:8px; display:flex; gap:10px; min-height:52px; padding:9px 10px; } .release-policy-rate { justify-content:space-between; } .release-policy-rate > span:first-child { color:var(--tx-m); font-size:11px; font-weight:600; } .release-rate-input { align-items:center; display:flex; gap:4px; } .release-rate-input input { background:var(--bg); border:1px solid var(--brd); border-radius:6px; color:var(--tx); font-size:12px; padding:5px; text-align:right; width:53px; } .release-rate-input b { color:var(--tx-m); font-size:11px; } .release-policy-toggle input { accent-color:var(--c-rel); flex-shrink:0; } .release-policy-toggle b { color:var(--tx); display:block; font-size:11px; font-weight:600; } .release-policy-toggle small { color:var(--tx-d); display:block; font-size:9.5px; line-height:1.3; margin-top:2px; } .release-decision-editor { border-top:1px solid var(--brd); display:grid; gap:10px; grid-template-columns:1fr 1.5fr; margin-top:12px; padding-top:12px; } .release-decision-editor label { color:var(--tx-m); display:block; font-size:10.5px; font-weight:600; margin-bottom:5px; } .release-decision-editor label span { color:var(--tx-d); font-weight:400; } .release-decision-editor textarea { min-height:62px; resize:vertical; } .release-cockpit-outcome { align-items:center; border:1px solid; border-radius:9px; display:flex; gap:11px; padding:12px; } .release-cockpit-outcome > i { font-size:18px; } .release-cockpit-outcome strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:13px; } .release-cockpit-outcome span { color:var(--tx-m); display:block; font-size:10.5px; margin-top:1px; } .release-decision-reason { align-items:flex-start; background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.18); border-radius:8px; color:var(--tx-m); display:flex; font-size:10.5px; gap:9px; margin:-5px 0 12px; padding:9px 11px; } .release-decision-reason i { color:#f59e0b; font-size:9px; margin-top:2px; } .release-checklist { display:grid; gap:7px; grid-template-columns:repeat(2,minmax(0,1fr)); } .release-check { align-items:center; background:var(--card); border:1px solid var(--brd); border-radius:8px; display:flex; gap:9px; min-height:48px; padding:9px 10px; } .release-check > i { color:var(--tx-d); flex-shrink:0; font-size:12px; } .release-check.is-pass > i { color:#10b981; } .release-check.is-fail { border-color:rgba(239,68,68,.25); } .release-check.is-fail > i { color:#ef4444; } .release-check.is-unknown > i { color:#f59e0b; } .release-check b { color:var(--tx); display:block; font-size:10.5px; font-weight:600; } .release-check small { color:var(--tx-d); display:block; font-size:9.5px; margin-top:1px; } .release-check button { align-items:center; background:transparent; border:0; color:var(--tx-d); cursor:pointer; display:flex; font-size:9px; gap:2px; padding:4px; } .release-check button:hover { color:var(--c-rel); } .release-check button em { font-size:8px; font-style:normal; } .release-decision-log { border-top:1px solid var(--brd); margin-top:13px; padding-top:11px; } .release-decision-log > p { color:var(--tx-d); font-size:9px; font-weight:700; letter-spacing:.06em; margin:0 0 6px; text-transform:uppercase; } .release-decision-log > div { align-items:baseline; display:flex; gap:8px; margin-top:4px; } .release-decision-log span { color:var(--tx-m); flex-shrink:0; font-size:9.5px; font-weight:700; } .release-decision-log small { color:var(--tx-d); font-size:9.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Focus / Today (C) */ .focus-page { padding-bottom: 28px; } .focus-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; } .focus-hero h3 { color:var(--tx); font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:650; letter-spacing:-.02em; margin:2px 0 4px; } .focus-hero p { color:var(--tx-m); font-size:13px; margin:0; max-width:620px; } .focus-total { display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex-shrink:0; color:var(--tx-d); font-size:11px; } .focus-total b { color:var(--acc-l); font-size:27px; font-variant-numeric:tabular-nums; line-height:1; } .focus-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .focus-group { background:var(--card); border:1px solid var(--brd); border-radius:12px; overflow:hidden; } .focus-group-head { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--brd); } .focus-group-icon,.focus-item-icon { align-items:center; border-radius:8px; display:inline-flex; flex-shrink:0; justify-content:center; } .focus-group-icon { width:28px; height:28px; font-size:12px; } .focus-group-head h4 { color:var(--tx); font-size:13px; font-weight:650; margin:0; } .focus-group-head p { color:var(--tx-d); font-size:10.5px; margin:1px 0 0; } .focus-group-count { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; } .focus-list { padding:6px; } .focus-item { align-items:center; background:transparent; border:0; border-radius:8px; color:var(--tx); cursor:pointer; display:flex; gap:10px; padding:9px; text-align:left; transition:background .15s; width:100%; } .focus-item:hover { background:var(--card-h); } .focus-item-icon { width:27px; height:27px; font-size:11px; } .focus-item strong { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .focus-item small { color:var(--tx-d); display:block; font-size:10.5px; margin-top:2px; } .focus-item-arrow { color:var(--tx-d); font-size:10px; } .focus-clear { align-items:center; background:var(--card); border:1px dashed var(--brd-l); border-radius:12px; color:var(--tx-m); display:flex; flex-direction:column; gap:9px; justify-content:center; min-height:200px; } .focus-clear i { color:var(--acc-l); font-size:28px; } .focus-clear p { font-size:13px; margin:0; } /* Focus Queue workflow (P1) */ .focus-tabs { align-items:center; display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; } .focus-tab { align-items:center; background:var(--card); border:1px solid var(--brd); border-radius:8px; color:var(--tx-m); cursor:pointer; display:inline-flex; font-size:11px; font-weight:600; gap:7px; min-height:34px; padding:6px 9px; transition:all .15s; } .focus-tab:hover { border-color:var(--brd-l); color:var(--tx); } .focus-tab.is-active { background:rgba(16,185,129,.1); border-color:rgba(16,185,129,.35); color:var(--acc-l); } .focus-tab span { align-items:center; background:var(--bg); border-radius:999px; color:inherit; display:inline-flex; font-size:9.5px; justify-content:center; min-width:20px; padding:2px 6px; } .focus-tab:focus-visible,.focus-item-open:focus-visible,.focus-workflow-action:focus-visible { outline:2px solid var(--acc); outline-offset:2px; } .focus-item { border:0; border-bottom:1px solid var(--brd); border-radius:0; display:block; padding:0; } .focus-item:last-child { border-bottom:0; } .focus-item:hover { background:transparent; } .focus-item-open { align-items:center; background:transparent; border:0; color:var(--tx); cursor:pointer; display:flex; gap:10px; padding:10px 9px 7px; text-align:left; transition:background .15s; width:100%; } .focus-item-open:hover { background:var(--card-h); } .focus-workflow-row { align-items:center; display:flex; gap:8px; justify-content:space-between; padding:0 9px 9px 46px; } .focus-workflow-chips,.focus-workflow-actions { align-items:center; display:flex; flex-wrap:wrap; gap:5px; } .focus-chip { align-items:center; background:var(--bg); border:1px solid var(--brd); border-radius:999px; color:var(--tx-m); display:inline-flex; font-size:9px; gap:4px; line-height:1; padding:4px 7px; } .focus-chip.is-unassigned { color:var(--tx-d); } .focus-chip.is-overdue { background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.28); color:#f87171; } .focus-chip.is-today { background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.28); color:#fbbf24; } .focus-chip.is-snoozed { background:rgba(192,132,252,.09); border-color:rgba(192,132,252,.25); color:#c084fc; } .focus-chip.is-done { background:rgba(16,185,129,.09); border-color:rgba(16,185,129,.25); color:#34d399; } .focus-workflow-action { align-items:center; background:transparent; border:1px solid var(--brd); border-radius:6px; color:var(--tx-m); cursor:pointer; display:inline-flex; font-size:9.5px; gap:5px; min-height:25px; padding:4px 7px; } .focus-workflow-action:hover { background:var(--card-h); color:var(--tx); } .focus-workflow-action.is-done { border-color:rgba(16,185,129,.28); color:#34d399; } .focus-clear.is-compact { min-height:140px; } .focus-workflow-modal-head { align-items:center; display:flex; gap:11px; margin-bottom:18px; } .focus-workflow-modal-head > span { align-items:center; background:rgba(16,185,129,.1); border-radius:10px; color:var(--acc-l); display:flex; height:38px; justify-content:center; width:38px; } .focus-workflow-modal-head p { color:var(--tx-d); font-size:9px; font-weight:700; letter-spacing:.08em; margin:0; text-transform:uppercase; } .focus-workflow-modal-head h3 { color:var(--tx); font-family:'Space Grotesk',sans-serif; font-size:16px; margin:1px 0 0; } .focus-workflow-modal > label,.focus-workflow-date-grid label { color:var(--tx-m); display:block; font-size:10.5px; font-weight:600; margin:0 0 5px; } .focus-workflow-date-grid { display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-top:12px; } .focus-workflow-hint { color:var(--tx-d); font-size:9.5px; line-height:1.45; margin:8px 0 0; } /* Traceability Matrix (A) */ .traceability-page { padding-bottom: 28px; } .traceability-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; } .trace-summary { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .trace-summary-item { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px; font-size:11px; color:var(--tx-m); background:var(--card); border:1px solid var(--brd); } .trace-summary-item b { font-size:14px; font-variant-numeric:tabular-nums; } .trace-summary-item.is-covered b { color:var(--acc-l); } .trace-summary-item.is-risk b { color:#f87171; } .trace-summary-item.is-missing b { color:#fbbf24; } .trace-filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; } .trace-filter { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:8px; background:var(--card); color:var(--tx-m); border:1px solid var(--brd); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; } .trace-filter:hover { color:var(--tx); border-color:var(--brd-l); } .trace-filter.is-active { color:var(--acc-l); background:rgba(16,185,129,.10); border-color:var(--acc); } .trace-filter span { font-variant-numeric:tabular-nums; color:inherit; opacity:.78; } .trace-table-wrap { overflow:auto; border:1px solid var(--brd); border-radius:12px; background:var(--card); } .trace-table { width:100%; min-width:880px; border-collapse:collapse; } .trace-table th { text-align:left; white-space:nowrap; padding:11px 14px; background:var(--bg2); color:var(--tx-d); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid var(--brd); } .trace-table td { padding:12px 14px; border-bottom:1px solid var(--brd); vertical-align:top; font-size:12px; } .trace-table tbody tr:last-child td { border-bottom:0; } .trace-row { transition:background .15s; } .trace-row:hover { background:var(--card-h); } .trace-row.is-risk td:first-child { box-shadow:inset 3px 0 #f87171; } .trace-row.is-missing td:first-child { box-shadow:inset 3px 0 #fbbf24; } .trace-tc,.trace-cell-stack { display:flex; flex-direction:column; align-items:flex-start; gap:5px; } .trace-tc > span,.trace-muted { color:var(--tx-d); font-size:11px; } .trace-link { max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; color:var(--tx); background:transparent; border:0; padding:0; font:inherit; font-weight:600; cursor:pointer; } .trace-link:hover { color:var(--acc-l); text-decoration:underline; } .trace-link.is-risk { color:#f87171; } .trace-status { display:inline-flex; padding:2px 6px; border-radius:5px; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .trace-status.is-pass { color:var(--acc-l); background:rgba(16,185,129,.12); } .trace-status.is-fail { color:#f87171; background:rgba(248,113,113,.12); } .trace-status.is-blocked { color:#fb923c; background:rgba(251,146,60,.12); } .trace-status.is-untested,.trace-status.is-missing { color:#fbbf24; background:rgba(251,191,36,.12); } .trace-env { color:#818cf8; font-size:11px; line-height:1.45; } .trace-empty { text-align:center; padding:34px !important; color:var(--tx-d); } @media (max-width: 1023px) { .dashboard-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 800px) { .dashboard-attention { grid-template-columns: 1fr; gap: 11px; } .focus-hero { align-items:flex-start; flex-direction:column; } .focus-total { align-items:flex-start; flex-direction:row; gap:7px; } .focus-grid { grid-template-columns:1fr; } .focus-page { margin-inline:0 !important; width:100%; } .focus-workflow-row { align-items:flex-start; flex-direction:column; padding-left:46px; } .focus-workflow-actions { width:100%; } .focus-workflow-action { justify-content:center; } .focus-workflow-date-grid { grid-template-columns:1fr; } .traceability-hero { align-items:flex-start; flex-direction:column; } .trace-summary { justify-content:flex-start; } .release-policy-grid,.release-checklist { grid-template-columns:1fr; } .release-decision-editor { grid-template-columns:1fr; } .release-decision-log > div { align-items:flex-start; flex-direction:column; gap:1px; } } @media (max-width: 640px) { /* Matches the Tailwind sm: breakpoint the Trends grid (3 cols) collapses at, so Bug lifecycle (2 cols) switches to single-column at the exact same width instead of a wider 800px cutoff — no awkward zone where one row is multi-column and the other is still stacked. */ .trend-lifecycle-grid { grid-template-columns: 1fr; } .dashboard-hero { align-items: flex-start; flex-direction: column; } .dashboard-attention { margin-bottom: 20px; padding: 13px; } .attention-list { grid-template-columns: 1fr; } .dashboard-insights { grid-template-columns: 1fr; } .insight-card { min-height: 184px; } } .search-filter-chip.active { border-color: var(--acc); color: var(--acc); background: rgba(16,185,129,0.08); } .search-filter-count { font-size: 10px; background: var(--card); color: var(--tx-d); padding: 0 4px; border-radius: 99px; min-width: 16px; text-align: center; } .search-filter-chip.active .search-filter-count { background: rgba(16,185,129,0.15); color: var(--acc); } /* Batch Operations */ .batch-selected { border-color: var(--acc) !important; box-shadow: 0 0 0 1px var(--acc), 0 4px 16px rgba(16,185,129,0.12); } .batch-toolbar { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; background: var(--bg2); border: 1px solid var(--brd2); border-radius: 10px; padding: 8px 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); white-space: nowrap; } .batch-toolbar.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .batch-action-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .15s; } .batch-action-btn:hover { background: var(--card); } /* ============================================ Snapshot Diff View ============================================ */ .diff-view { font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: 12.5px; line-height: 1.6; } .diff-add, .diff-del, .diff-ctx, .diff-skip { display: flex; align-items: flex-start; padding: 1.5px 14px; min-height: 22px; white-space: pre-wrap; word-break: break-all; } .diff-add { background: rgba(16, 185, 129, 0.08); } .diff-del { background: rgba(239, 68, 68, 0.08); } .diff-ctx { background: transparent; } .diff-skip { background: var(--bg); color: var(--tx-d); font-size: 11px; font-family: inherit; font-style: italic; justify-content: center; padding: 3px 14px; border-top: 1px solid var(--brd); border-bottom: 1px solid var(--brd); } .diff-sign { flex-shrink: 0; width: 20px; font-weight: 700; user-select: none; opacity: 0.7; } .diff-add .diff-sign { color: var(--acc); } .diff-del .diff-sign { color: #f87171; } .diff-ctx .diff-sign { color: var(--tx-d); } [data-theme="light"] .diff-add { background: rgba(16, 185, 129, 0.1); } [data-theme="light"] .diff-del { background: rgba(239, 68, 68, 0.07); } [data-theme="light"] .diff-skip { background: var(--bg2); } /* ============================================ Light Theme Overrides ============================================ */ .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-light { display: inline; } [data-theme="light"] .theme-icon-dark { display: none; } [data-theme="light"] .code-copy-btn { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .code-copy-btn:hover { background: rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.18); } [data-theme="light"] .batch-toolbar { box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .api-impact-editor { padding:14px; border:1px solid var(--brd); border-radius:10px; background:var(--bg2); } .api-impact-check { display:flex; align-items:center; gap:8px; color:var(--tx-m); font-size:12px; cursor:pointer; } .api-impact-hint { margin:7px 0 0 24px; color:var(--tx-d); font-size:10px; line-height:1.45; } .impact-section { margin-bottom:20px; border:1px solid var(--brd); border-radius:14px; background:var(--card); overflow:hidden; } .impact-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px 12px; } .impact-head h3 { color:var(--tx); font-size:14px; font-weight:700; } .impact-head p { margin-top:3px; color:var(--tx-d); font-size:11px; } .impact-total { display:flex; align-items:center; gap:6px; color:var(--tx-m); font-size:10px; white-space:nowrap; } .impact-total b { color:var(--acc-l); font-size:18px; } .impact-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); background:var(--bg2); } .impact-summary > span { display:flex; align-items:center; justify-content:center; gap:7px; padding:9px; color:var(--tx-m); font-size:10px; border-right:1px solid var(--brd); } .impact-summary > span:last-child { border-right:0; } .impact-summary b { font-size:14px; font-variant-numeric:tabular-nums; } .impact-summary .is-missing b,.impact-summary .is-risk b { color:#f87171; } .impact-summary .is-due b { color:#fbbf24; } .impact-summary .is-covered b { color:var(--acc-l); } .impact-list { display:flex; flex-direction:column; } .impact-row { display:grid; grid-template-columns:44px minmax(220px,.9fr) minmax(300px,1.1fr); gap:14px; align-items:start; padding:14px 18px; border-bottom:1px solid var(--brd); } .impact-row:last-child { border-bottom:0; } .impact-row.is-missing,.impact-row.is-risk { box-shadow:inset 3px 0 #f87171; } .impact-row.is-due { box-shadow:inset 3px 0 #fbbf24; } .impact-row.is-covered { box-shadow:inset 3px 0 var(--acc); } .impact-priority { display:flex; align-items:center; justify-content:center; min-height:28px; border-radius:7px; color:var(--tx); background:var(--bg2); border:1px solid var(--brd); font-size:11px; font-weight:800; } .impact-api-title { display:flex; align-items:center; gap:8px; min-width:0; } .impact-method { padding:3px 6px; border-radius:5px; color:#60a5fa; background:rgba(96,165,250,.12); font:700 9px ui-monospace,monospace; } .impact-meta { display:flex; gap:7px 12px; flex-wrap:wrap; margin-top:7px; color:var(--tx-d); font-size:10px; } .impact-meta b { color:var(--tx-m); font-weight:600; } .impact-level { padding:1px 5px; border-radius:4px; font-weight:700; text-transform:uppercase; } .impact-level.is-high { color:#f87171; background:rgba(248,113,113,.1); } .impact-level.is-medium { color:#fbbf24; background:rgba(251,191,36,.1); } .impact-level.is-low { color:#60a5fa; background:rgba(96,165,250,.1); } .impact-evidence > p { margin:6px 0; color:var(--tx-m); font-size:11px; line-height:1.45; } .impact-state { display:inline-flex; padding:3px 7px; border-radius:5px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; } .impact-state.is-missing,.impact-state.is-risk { color:#f87171; background:rgba(248,113,113,.12); } .impact-state.is-due { color:#fbbf24; background:rgba(251,191,36,.12); } .impact-state.is-covered { color:var(--acc-l); background:rgba(16,185,129,.12); } .impact-tests { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--tx-d); font-size:10px; } .impact-tests > b { color:var(--tx-m); } .impact-tests .trace-link { max-width:180px; padding:3px 6px; border:1px solid var(--brd); border-radius:5px; font-size:10px; } .impact-empty { display:flex; justify-content:center; align-items:center; gap:8px; padding:24px; color:var(--tx-d); font-size:12px; } .impact-empty i { color:var(--acc-l); } @media (max-width: 800px) { .impact-row { grid-template-columns:40px 1fr; } .impact-evidence { grid-column:2; } } @media (max-width: 640px) { .impact-head { flex-direction:column; } .impact-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .impact-summary > span:nth-child(2) { border-right:0; } .impact-summary > span:nth-child(-n+2) { border-bottom:1px solid var(--brd); } .impact-row { grid-template-columns:34px minmax(0,1fr); padding:13px; gap:10px; } } .api-impact-view { display:flex; align-items:center; gap:8px 14px; flex-wrap:wrap; padding:8px 16px; color:var(--tx-d); background:var(--bg2); border-bottom:1px solid var(--brd); font-size:10px; } .api-impact-view b { color:var(--tx-m); font-weight:600; } .api-impact-view .impact-level { font-size:9px; } /* P2 Defect triage: decision ownership and SLA */ .bug-triage-editor { padding:16px; border:1px solid var(--brd); border-radius:12px; background:var(--bg2); } .bug-triage-editor-head,.bug-triage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; } .bug-triage-editor-head h3,.bug-triage-head h3 { color:var(--tx); font-size:14px; font-weight:700; } .bug-triage-editor-head p,.bug-triage-head p { margin-top:3px; color:var(--tx-d); font-size:10px; } .bug-triage-editor-head > span { padding:4px 7px; border-radius:5px; background:rgba(99,102,241,.1); color:#818cf8; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; } .bug-triage-rule { display:flex; gap:7px; align-items:flex-start; margin:11px 0 0; color:var(--tx-d); font-size:10px; line-height:1.45; } .bug-triage-rule i { margin-top:2px; color:#60a5fa; } .bug-triage-card { margin-bottom:24px; border:1px solid var(--brd); border-left:3px solid var(--brd-l); border-radius:12px; background:var(--card); overflow:hidden; } .bug-triage-card.is-breached,.bug-triage-card.is-missed { border-left-color:#f87171; } .bug-triage-card.is-soon { border-left-color:#fbbf24; } .bug-triage-card.is-done { border-left-color:var(--acc); } .bug-triage-card.is-duplicate { border-left-color:#94a3b8; } .bug-triage-head { margin:0; padding:15px 16px 12px; } .bug-triage-status,.triage-mini { display:inline-flex; align-items:center; padding:3px 7px; border-radius:5px; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.035em; white-space:nowrap; } .bug-triage-status.is-pending,.triage-mini.is-pending { color:#60a5fa; background:rgba(96,165,250,.12); } .bug-triage-status.is-soon,.triage-mini.is-soon { color:#fbbf24; background:rgba(251,191,36,.12); } .bug-triage-status.is-breached,.bug-triage-status.is-missed,.triage-mini.is-breached,.triage-mini.is-missed { color:#f87171; background:rgba(248,113,113,.12); } .bug-triage-status.is-done,.triage-mini.is-done { color:var(--acc-l); background:rgba(16,185,129,.12); } .bug-triage-status.is-duplicate,.triage-mini.is-duplicate { color:#cbd5e1; background:rgba(148,163,184,.12); } .bug-triage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); background:var(--bg2); } .bug-triage-grid > div { min-width:0; padding:11px 14px; border-right:1px solid var(--brd); } .bug-triage-grid > div:last-child { border-right:0; } .bug-triage-grid span { display:block; margin-bottom:4px; color:var(--tx-d); font-size:9px; text-transform:uppercase; letter-spacing:.04em; } .bug-triage-grid b { display:block; color:var(--tx); font-size:11px; line-height:1.4; overflow-wrap:anywhere; } .bug-triage-missing,.bug-triage-original,.bug-triage-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; } .bug-triage-missing span { display:inline-flex; align-items:center; gap:5px; color:#fbbf24; font-size:10px; } .bug-triage-original { color:var(--tx-m); font-size:10px; border-top:1px solid var(--brd); } .bug-triage-original button { color:#60a5fa; font-weight:600; text-align:left; } .bug-triage-actions { justify-content:flex-end; border-top:1px solid var(--brd); } .bug-triage-actions .btn-s { display:inline-flex; align-items:center; gap:6px; } .bug-card-triage { display:flex; align-items:center; gap:5px; margin-bottom:7px; color:var(--tx-d); font-size:9px; } .bug-card-triage span { padding:2px 5px; border:1px solid var(--brd); border-radius:4px; } @media (max-width: 640px) { .bug-triage-editor-head,.bug-triage-head { flex-direction:column; } .bug-triage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .bug-triage-grid > div:nth-child(2) { border-right:0; } .bug-triage-grid > div:nth-child(-n+2) { border-bottom:1px solid var(--brd); } } /* P2 Release quality scorecard */ .quality-scorecard { margin-bottom:20px; border:1px solid var(--brd); border-radius:14px; background:var(--card); overflow:hidden; } .quality-score-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px 13px; } .quality-score-head h3 { color:var(--tx); font-size:14px; font-weight:700; } .quality-score-head p { margin-top:3px; color:var(--tx-d); font-size:10px; } .quality-baseline { display:flex; align-items:center; gap:6px; color:var(--tx-m); font-size:10px; } .quality-baseline b { padding:3px 6px; border-radius:4px; background:rgba(99,102,241,.12); color:#818cf8; font-size:8px; text-transform:uppercase; letter-spacing:.05em; } .quality-score-overview { display:grid; grid-template-columns:150px minmax(180px,.7fr) minmax(240px,1fr); border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); background:var(--bg2); } .quality-score-value,.quality-score-summary,.quality-drivers { min-width:0; padding:15px 18px; border-right:1px solid var(--brd); } .quality-drivers { border-right:0; } .quality-score-value { display:flex; align-items:baseline; flex-wrap:wrap; } .quality-score-value strong { font-size:32px; line-height:1; font-variant-numeric:tabular-nums; } .quality-score-value > span { color:var(--tx-d); font-size:11px; } .quality-score-value em { width:100%; margin-top:6px; font-size:9px; font-style:normal; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .quality-score-value.is-strong strong,.quality-score-value.is-strong em { color:var(--acc-l); } .quality-score-value.is-watch strong,.quality-score-value.is-watch em { color:#fbbf24; } .quality-score-value.is-risk strong,.quality-score-value.is-risk em { color:#f87171; } .quality-score-value.is-unknown strong,.quality-score-value.is-unknown em { color:var(--tx-d); } .quality-score-summary > span,.quality-drivers > span { display:block; margin-bottom:7px; color:var(--tx-d); font-size:9px; text-transform:uppercase; letter-spacing:.05em; } .quality-score-summary > div { display:flex; align-items:center; gap:8px; } .quality-score-summary b { color:var(--tx-m); font-size:11px; } .quality-score-summary small,.quality-drivers small { display:block; margin-top:5px; color:var(--tx-d); font-size:9px; } .score-delta { display:inline-flex; padding:3px 6px; border-radius:5px; font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; } .score-delta.is-up { color:var(--acc-l); background:rgba(16,185,129,.12); } .score-delta.is-down { color:#f87171; background:rgba(248,113,113,.12); } .score-delta.is-flat { color:var(--tx-d); background:rgba(122,139,168,.1); font-size:9px; } .quality-drivers b { display:inline-flex; align-items:center; gap:5px; margin:0 5px 5px 0; padding:4px 7px; border-radius:5px; font-size:9px; } .quality-drivers b.is-up { color:var(--acc-l); background:rgba(16,185,129,.1); } .quality-drivers b.is-down { color:#f87171; background:rgba(248,113,113,.1); } .quality-dimensions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:13px 16px; gap:12px; border-bottom:1px solid var(--brd); } .quality-dimensions > div > span { display:flex; justify-content:space-between; gap:5px; color:var(--tx-m); font-size:9px; } .quality-dimensions em { color:var(--tx-d); font-size:8px; font-style:normal; } .quality-dimensions b { display:block; margin:5px 0; color:var(--tx); font-size:13px; } .quality-dimensions i { display:block; height:3px; border-radius:3px; background:var(--brd); overflow:hidden; } .quality-dimensions u { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#6366f1,var(--acc)); text-decoration:none; } .quality-modules-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; } .quality-modules-head b { color:var(--tx); font-size:11px; } .quality-modules-head span { color:var(--tx-d); font-size:9px; } .quality-module-row { display:grid; grid-template-columns:minmax(130px,1.2fr) 105px repeat(4,minmax(65px,.65fr)); gap:10px; align-items:center; padding:10px 16px; border-top:1px solid var(--brd); } .quality-module-row > strong { min-width:0; color:var(--tx); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .quality-module-row > span:not(.quality-module-score) { display:flex; flex-direction:column; } .quality-module-row > span b { color:var(--tx); font-size:10px; } .quality-module-row > span small { color:var(--tx-d); font-size:8px; } .quality-module-score { display:flex; align-items:center; gap:4px; color:var(--tx); font-size:14px; font-weight:800; } .quality-module-score > small { color:var(--tx-d); font-size:8px; font-weight:400; } .quality-module-score .score-delta { margin-left:3px; padding:2px 4px; font-size:8px; } .quality-empty { padding:18px; border-top:1px solid var(--brd); color:var(--tx-d); font-size:10px; text-align:center; } @media (max-width: 700px) { .quality-score-head { flex-direction:column; } .quality-score-overview { grid-template-columns:1fr 1fr; } .quality-drivers { grid-column:1/-1; border-top:1px solid var(--brd); } .quality-score-summary { border-right:0; } .quality-dimensions { grid-template-columns:repeat(2,minmax(0,1fr)); } .quality-module-row { grid-template-columns:minmax(115px,1fr) 95px repeat(2,minmax(55px,.6fr)); overflow-x:auto; } .quality-module-row > span:nth-last-child(-n+2) { display:none; } } /* Wave 2A: consistent keyboard focus and motion preferences */ :where(button, a[href], input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } :where(.form-input, .form-select, .editor-ta):focus-visible { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Wave 2B: mobile layout and touch-target hardening */ @media (max-width: 767px) { #app-header button, #sidebar .nav-item, .btn-p, .btn-s, .btn-d, .dashboard-trends button, .focus-tab, .focus-item-open, .focus-workflow-action, .trace-filter, .trace-link, .doc-card button, .batch-action-btn, .search-filter-chip, .dp-trigger, .dp-nav-btn { min-height: 44px; } .doc-card button, .dp-nav-btn, .dashboard-trends button { min-width:44px; } .doc-list-select-btn { min-height:44px; } .form-input, .form-select, input[type="date"] { min-height:44px; } .focus-workflow-actions { gap:8px; } .focus-workflow-action { padding-inline:12px; } .trace-link { align-items:center; display:inline-flex; padding-block:8px; } .dashboard-trends .dashboard-section-head { align-items:flex-start; gap:10px; } } /* Wave 2C: consistent system states */ .ui-state { align-items:center; background:linear-gradient(180deg,rgba(19,28,46,.62),rgba(13,20,36,.38)); border:1px dashed var(--brd); border-radius:14px; display:flex; flex-direction:column; justify-content:center; min-height:260px; padding:42px 24px; text-align:center; } .ui-state-icon { align-items:center; background:rgba(122,139,168,.1); border:1px solid rgba(122,139,168,.16); border-radius:12px; color:var(--tx-m); display:flex; font-size:20px; height:48px; justify-content:center; margin-bottom:14px; width:48px; } .ui-state h3 { color:var(--tx); font-size:14px; font-weight:700; margin:0; } .ui-state p { color:var(--tx-d); font-size:11px; line-height:1.55; margin:5px 0 0; max-width:460px; } .ui-state-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; } .ui-state-filtered .ui-state-icon { background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.2); color:#fbbf24; } .ui-state-error { background:rgba(239,68,68,.045); border-color:rgba(248,113,113,.26); } .ui-state-error .ui-state-icon { background:rgba(239,68,68,.1); border-color:rgba(248,113,113,.2); color:#f87171; } .ui-state-error h3 { color:#fca5a5; } .ui-state-compact { min-height:0; margin:14px; padding:24px; } :where(button, input, select, textarea):disabled { cursor:not-allowed !important; filter:saturate(.55); opacity:.5 !important; } button.is-busy { align-items:center; display:inline-flex; gap:7px; justify-content:center; } button[aria-busy="true"] { cursor:progress !important; } /* Shared pointer-only hover states. Keeping these in CSS avoids sticky inline styles and prevents touch devices from inheriting mouse-only feedback. */ @media (hover: hover) and (pointer: fine) { .ui-hover-card:hover { background: var(--card) !important; } .ui-hover-card-h:hover { background: var(--card-h) !important; } .ui-hover-bg2:hover { background: var(--bg2) !important; } .ui-hover-danger:hover { background: rgba(244, 63, 94, 0.06) !important; } .ui-hover-text:hover { color: var(--tx) !important; } .ui-hover-accent:hover { color: var(--acc) !important; } }