/* ========================================================= RPA Error Resolver — design system v2 DARK : near-black, violet/cyan accent duo, soft elevation LIGHT : soft lavender-off-white, never stark white Toggle: data-theme="light" on ========================================================= */ @font-face { font-family: 'Atlassian Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/atlassian-sans.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2'); } /* ── DARK (default) — near-black with violet/cyan accent duo ─────── */ :root { --font-sans: 'Atlassian Sans', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, 'Segoe UI Mono', monospace; --font-body-size: 14px; --font-body-lh: 1.42857142857143; --bg: #07080B; --surface: #0B0C10; --card: #111218; --card-hover: #17181F; --elevated: #1B1C24; --sunken: #020203; --border: rgba(255,255,255,.08); --border-2: rgba(255,255,255,.05); --link: #5B9DFF; --blue: #5B9DFF; --blue-dark: #7FB4FF; --blue-dim: rgba(91,157,255,.14); --blue-hover: rgba(91,157,255,.22); --text: #E7E7EE; --text-2: #A4A6B5; --text-3: #74768A; --text-expandable: #8B8B9D; --font-weight-body: 400; --green: #34E1A6; --green-dim: rgba(52,225,166,.13); --yellow: #FACC15; --yellow-dim: rgba(250,204,21,.12); --orange: #FB923C; --orange-dim: rgba(251,146,60,.12); --red: #F87171; --red-dim: rgba(248,113,113,.12); --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --ease-out: cubic-bezier(.2, .8, .2, 1); --focus-ring: 0 0 0 2px color-mix(in srgb, var(--blue) 32%, transparent); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* Rich accent palette — violet token holds the GOLD hero accent, teal holds a secondary sky-blue. Kept these var names to avoid a risky rename across every consumer; only the hex values carry the actual brand meaning. */ --violet: #D9A954; --violet-dim: rgba(217,169,84,.16); --teal: #38BDF8; --teal-dim: rgba(56,189,248,.13); --accent-grad-1: #D9A954; --accent-grad-2: #38BDF8; --glass-bg: rgba(11,12,16,.82); --glass-border: var(--border); --glass-blur: saturate(140%) blur(14px); --shadow-sm: 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset; --shadow-md: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset; --shadow-lg: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset; --shadow-glow: 0 0 36px color-mix(in srgb, var(--violet) 24%, transparent); } /* ── LIGHT — matte greyish-white, never bright beige or stark white ── */ [data-theme="light"] { --bg: #EBEAE7; --surface: #F1F0ED; --card: #FAFAF8; --card-hover: #FFFFFF; --elevated: #FAFAF8; --border: rgba(40,38,32,.10); --border-2: rgba(40,38,32,.06); --link: #1D6FE0; --blue: #1D6FE0; --blue-dark: #0F4FB0; --blue-dim: rgba(29,111,224,.10); --blue-hover: rgba(29,111,224,.16); --text: #26241F; --text-2: #56544C; --text-3: #87837A; --font-weight-body: 400; --green: #0F9D6F; --green-dim: rgba(15,157,111,.11); --yellow: #B38600; --yellow-dim: rgba(179,134,0,.12); --orange: #C25100; --orange-dim: rgba(194,81,0,.12); --red: #C9372C; --red-dim: rgba(201,55,44,.12); --violet: #A9791C; --violet-dim: rgba(169,121,28,.11); --teal: #0284C7; --teal-dim: rgba(2,132,199,.10); --accent-grad-1: #A9791C; --accent-grad-2: #0284C7; --glass-bg: rgba(245,244,250,.82); --glass-border: var(--border); --glass-blur: saturate(140%) blur(14px); --shadow-sm: 0 1px 2px rgba(30,20,60,.05), 0 0 0 1px rgba(30,20,60,.05); --shadow-md: 0 10px 28px rgba(30,20,60,.10), 0 0 0 1px rgba(30,20,60,.05); --shadow-lg: 0 20px 48px rgba(30,20,60,.14), 0 0 0 1px rgba(30,20,60,.06); --shadow-glow: 0 0 28px color-mix(in srgb, var(--violet) 16%, transparent); } * { box-sizing: border-box; } body { background: var(--bg); background-image: radial-gradient(ellipse 120% 70% at 15% -20%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 55%), radial-gradient(ellipse 90% 55% at 100% 0%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 48%); background-attachment: fixed; color: var(--text); font-family: var(--font-sans); font-size: var(--font-body-size); line-height: var(--font-body-lh); font-weight: var(--font-weight-body, 400); letter-spacing: 0; min-height: 100vh; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } [data-theme="light"] body { background: var(--bg); background-image: radial-gradient(ellipse 110% 65% at 15% -20%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 52%), radial-gradient(ellipse 90% 50% at 100% 0%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 48%), linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); background-attachment: fixed; } a { color: var(--link); text-decoration: none; transition: color .15s var(--ease-out, ease), opacity .15s var(--ease-out, ease); } a:hover { color: var(--blue-dark); text-decoration: none; } /* scrollbars */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ── Navbar ────────────────────────────────────────────── */ .app-nav { height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; gap: 16px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 0 rgba(255,255,255,.03); } [data-theme="light"] .app-nav { background: var(--surface); border-bottom-color: var(--border); box-shadow: 0 1px 0 rgba(28,36,48,.06); } .nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; transition: opacity .15s var(--ease-out, ease); } .nav-brand:hover { opacity: .82; } .nav-logo-img { width: 28px; height: 28px; object-fit: contain; display: block; flex-shrink: 0; } .nav-logo { width: 24px; height: 24px; background: var(--blue); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: -0.5px; } .nav-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .nav-divider { width: 1px; height: 18px; background: var(--border); } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { font-size: 12px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 16px 12px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 6px; transition: color .15s var(--ease-out), background .15s var(--ease-out); position: relative; } .nav-link i { font-size: 13px; opacity: .85; } .nav-link:hover { color: var(--text); background: color-mix(in srgb, var(--blue) 8%, transparent); } .nav-link.active { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 8px; right: 8px; height: 2px; background: linear-gradient(90deg, var(--accent-grad-1), var(--accent-grad-2)); border-radius: 2px 2px 0 0; } .nav-spacer { flex: 1; } /* Token pill in navbar */ .token-pill { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 20px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font-size: 12px; color: var(--text-2); transition: border-color .15s, background .15s; text-decoration: none; } .token-pill:hover { border-color: color-mix(in srgb, var(--link) 45%, var(--border)); background: var(--blue-dim); color: var(--text); box-shadow: var(--focus-ring); } .token-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dot-valid { background: var(--violet); box-shadow: 0 0 5px var(--violet); } .dot-invalid { background: var(--red); box-shadow: 0 0 5px var(--red); } .dot-missing { background: var(--yellow); box-shadow: 0 0 5px var(--yellow); } /* ── Compact stats bar ─────────────────────────────────── */ .stats-bar { display: flex; align-items: center; gap: 0; padding: 0 20px; height: 38px; background: var(--surface); border-bottom: 1px solid var(--border-2); } .stat-item { display: flex; align-items: center; gap: 6px; padding: 0 16px; border-right: 1px solid var(--border-2); height: 100%; font-size: 12px; } .stat-item:first-child { padding-left: 0; } .stat-item:last-child { border-right: none; } .stat-val { font-weight: 600; font-size: 12px; color: var(--text); } .stat-key { color: var(--text-2); font-size: 11px; } .stat-icon { font-size: 12px; } /* ── Page layout ───────────────────────────────────────── */ .page-content { padding: var(--space-5) var(--space-6); background: var(--bg); min-height: calc(100vh - 52px); } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .page-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; margin: 0; } /* ── Buttons ───────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-sans); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease), transform .15s var(--ease-out, ease); text-decoration: none; white-space: nowrap; line-height: 1.333; background: none; } .btn:active { transform: scale(.97); } .btn-primary { background: linear-gradient(135deg, var(--violet), color-mix(in srgb, var(--violet) 75%, var(--teal))); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 16px color-mix(in srgb, var(--violet) 30%, transparent); } .btn-primary:hover { filter: brightness(1.08); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 20px color-mix(in srgb, var(--violet) 40%, transparent); } .btn-ghost { background: var(--card); color: var(--text-2); border-color: var(--border); } .btn-ghost:hover { background: var(--blue-dim); color: var(--text); border-color: color-mix(in srgb, var(--link) 35%, var(--border)); box-shadow: var(--focus-ring); } .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); color: var(--text-2); cursor: pointer; transition: all .15s; font-size: 14px; text-decoration: none; flex-shrink: 0; } .btn-icon:hover { background: var(--blue-dim); border-color: color-mix(in srgb, var(--link) 40%, var(--border)); color: var(--blue); box-shadow: var(--focus-ring); } .btn-icon.active { background: var(--violet-dim); border-color: var(--violet); color: var(--violet); } .btn-icon.disabled, .btn-icon:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; } .btn-icon.has-link { color: var(--blue); border-color: var(--blue); background: var(--blue-dim); } /* ── Filter bar ────────────────────────────────────────── */ .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; } .filter-search { position: relative; flex: 1; min-width: 160px; max-width: 260px; } .filter-input { width: 100%; height: 28px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 0 8px; font-family: var(--font-sans); font-size: 12px; outline: none; transition: border-color .12s, background .12s; box-sizing: border-box; } .filter-input:focus { border-color: var(--blue); background: var(--surface); } .filter-select { height: 28px; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 0 8px; font-family: var(--font-sans); font-size: 12px; outline: none; cursor: pointer; transition: border-color .12s; min-width: 120px; box-sizing: border-box; } .filter-select:focus { border-color: var(--blue); } /* Icon toggle filter buttons (blocker / jira) */ .filter-icon-toggle { display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-3); font-size: 14px; cursor: pointer; transition: color .15s, border-color .15s, background .15s; flex-shrink: 0; } .filter-icon-toggle:hover { border-color: var(--text-3); color: var(--text-2); } .filter-icon-toggle.filt-active { background: var(--violet-dim); border-color: var(--violet); color: var(--violet); } .filter-icon-toggle.filt-muted { background: var(--elevated); border-color: var(--border); color: var(--text-3); opacity: .65; } /* Team pill filter buttons */ .team-pills { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .team-pill { display: inline-flex; align-items: center; height: 27px; padding: 0 9px; border-radius: 14px; border: 1.5px solid transparent; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; cursor: pointer; background: var(--surface); color: var(--text-3); border-color: var(--border); transition: all .15s; white-space: nowrap; } .team-pill:hover { opacity: .9; } .team-pill.active { border-color: currentColor; opacity: 1; } .team-pill-all { color: var(--text-2) !important; } .team-pill-all.active { background: var(--elevated) !important; border-color: var(--border) !important; color: var(--text) !important; } .filter-toggle { height: 28px; font-size: 12px; padding: 0 8px; line-height: 1; box-sizing: border-box; } .filter-toggle.active { background: var(--red-dim); border-color: rgba(239,68,68,.35); color: var(--red); } /* Owner bucket pills (All / Osama / Omar) — fixed semantic colors */ .bucket-pill-osama.active { color: #a78bfa; border-color: #a78bfa; background: color-mix(in srgb, #a78bfa 14%, var(--surface)); } .bucket-pill-omar.active { color: #f59e0b; border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); } /* Blocker filter pills (All / Blockers / Non-blockers) */ .blk-pill-blockers.active { color: var(--red); border-color: var(--red); background: var(--red-dim); } .blk-pill-non.active { color: var(--text-2); border-color: var(--border-2); background: var(--elevated); } /* R-Visa Blocker — inline icon next to process name */ .freq-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .blocker-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 3px; background: var(--red-dim); color: var(--red); font-size: 9px; margin-left: 5px; vertical-align: middle; flex-shrink: 0; border: 1px solid rgba(229,72,77,.25); position: relative; top: -1px; } /* ── Groups Table ──────────────────────────────────────── */ .groups-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } [data-theme="light"] .groups-wrap { background: var(--card); box-shadow: var(--shadow-md); border-color: var(--border); } .groups-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 6%, var(--elevated)) !important; } [data-theme="light"] .groups-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 8%, #FFFFFF) !important; } .groups-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } .groups-table thead tr { background: var(--elevated); border-bottom: 1px solid var(--border); } .groups-table thead th { padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); } .groups-table thead th.col-jira, .groups-table thead th.col-jira-st, .groups-table thead th.col-age { text-align: center; } .groups-table tbody tr { border-bottom: 1px solid var(--border-2); background: var(--card); transition: background .1s ease; } .groups-table tbody tr:last-child { border-bottom: none; } .groups-table tbody tr:hover { background: color-mix(in srgb, var(--blue) 5%, var(--elevated)) !important; } .groups-table tbody td { padding: 7px 8px; vertical-align: middle; font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--text); } /* Column widths — tuned so the flexible columns (process/error/rpa-log) absorb the space freed by the removed actions column, and the fixed right-side columns (age/status) sit snug against their content instead of leaving a wide empty band. */ .col-freq { width: 5%; text-align: center; vertical-align: middle !important; padding: 7px 2px !important; } .col-process { width: 26%; padding: 7px 6px !important; } .col-error { width: 32%; padding: 7px 6px !important; } .col-rpa-log { width: 22%; vertical-align: middle !important; padding: 7px 5px !important; } .col-age { width: 3%; text-align: center !important; vertical-align: middle !important; padding: 7px 2px !important; white-space: nowrap; } .col-jira-st { width: 10%; min-width: 100px; vertical-align: middle !important; padding: 6px 4px !important; text-align:center; } /* Trend column removed — hide if any stale cached HTML still renders it */ .col-trend, th.col-trend, td.col-trend, .row-spark { display: none !important; width: 0 !important; padding: 0 !important; border: none !important; } /* ── Row hover preview popover (Process cell) ──────────────────────── */ .row-hover-preview { display: none; position: fixed; z-index: 3000; max-width: 280px; background: var(--elevated); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.35); overflow: hidden; opacity: 0; transition: opacity .12s var(--ease-out); pointer-events: none; } .rhp-img { display: block; width: 100%; max-height: 140px; object-fit: cover; border-bottom: 1px solid var(--border-2); background: var(--bg); } .rhp-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; } .rhp-title { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); display: flex; align-items: center; gap: 4px; margin-bottom: 2px; } .rhp-row { display: flex; gap: 6px; font-size: 12px; align-items: baseline; } .rhp-k { color: var(--text-3); flex-shrink: 0; min-width: 68px; font-size: 10.5px; } .rhp-v { color: var(--text-2); font-weight: 600; word-break: break-word; } [data-theme="light"] .row-hover-preview { background: var(--card); } /* ── Skeleton loading rows (dashboard refresh in flight) ────────────── */ .skeleton-row td { border: none !important; padding: 11px 16px !important; } .skeleton-bar { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--elevated) 25%, var(--border) 50%, var(--elevated) 75%); background-size: 200% 100%; animation: skeletonShimmer 1.3s ease-in-out infinite; } @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .col-jira { width: 36px; text-align: center; vertical-align: middle !important; padding: 8px 2px !important; } .col-date { width: 88px; white-space: nowrap; } /* ── Jira status lozenge — Atlassian Cloud list view ── */ .jira-lozenge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 16px; padding: 0 4px; border-radius: 3px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: normal; text-transform: none; white-space: nowrap; vertical-align: middle; border: none; box-sizing: border-box; cursor: default; } .triage-cell-row .jira-lozenge { cursor: pointer; } .triage-cell-row .jira-lozenge:hover { filter: brightness(1.05); } .jira-lozenge--wide { max-width: 148px; } .jira-lozenge--wide .jira-lozenge__label { max-width: 140px; } .jira-lozenge__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } .triage-cell-row .jira-lozenge__label { max-width: 136px; } /* Atlassian lozenge palette (same in dark & light — filled pills on dark UI) */ .jira-lozenge--neutral { background: #DFE1E6; color: #44546F; } .jira-lozenge--inprogress { background: #85B8FF; color: #09326C; } .jira-lozenge--success { background: #B3DF72; color: #1C3329; } .jira-lozenge--danger { background: #FD9891; color: #5D1F1A; } /* Legacy aliases → map to new categories */ .jira-lozenge--gray { background: #DFE1E6; color: #44546F; } .jira-lozenge--blue { background: #85B8FF; color: #09326C; } .jira-lozenge--green { background: #B3DF72; color: #1C3329; } .jira-lozenge--red { background: #FD9891; color: #5D1F1A; } .jira-lozenge--amber { background: #FFC400; color: #3D3100; } .jira-lozenge--pink { background: #F797D2; color: #50253F; text-transform: none; } .jira-lozenge--todo, .jira-lozenge--cancelled, .jira-lozenge--indeterminate, .jira-lozenge--purple, .jira-lozenge--warning, .jira-lozenge--assigned { background: #85B8FF; color: #09326C; } /* ── Legacy jira-badge-sm (kept for gradual migration) ── */ .jira-badge-sm { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 8px; min-height: 20px; border-radius: var(--radius-sm); white-space: normal; max-width: 140px; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; border: 1px solid transparent; text-align: left; justify-content: center; cursor: pointer; transition: transform .12s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease), filter .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .triage-cell-row .jira-badge-sm:hover, .triage-cell-row .jira-badge-sm:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 10px color-mix(in srgb, var(--violet) 28%, transparent); filter: brightness(1.08); outline: none; } .jbs-assigned { max-width: none; } .jbs-assigned-pair { max-width: 140px; padding: 3px 8px; } .jbs-assigned-names { font-size: 10px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 100%; } .jira-lozenge--syncing { flex-direction: column; gap: 1px; padding: 2px 6px; min-height: 22px; } .jira-lozenge--syncing .jira-lozenge__label { font-size: 10px; max-width: 130px; } .jira-syncing-key { font-size: 8px; font-weight: 600; opacity: 0.75; letter-spacing: 0; text-transform: none; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jira-syncing-spin { display: inline-block; animation: jiraSpin 1.2s linear infinite; } @keyframes jiraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .jbs-test { background: color-mix(in srgb,var(--yellow) 22%,transparent); color: var(--yellow); border-color: color-mix(in srgb,var(--yellow) 45%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--yellow) 18%,transparent) inset; } .jbs-staging { background: color-mix(in srgb,var(--blue) 13%,transparent); color: #79d8ff; border-color: color-mix(in srgb,var(--blue) 28%,transparent); } .jbs-done { background: color-mix(in srgb,var(--green) 16%,transparent); color: #73e8a3; border-color: color-mix(in srgb,var(--green) 30%,transparent); } .jbs-cancel { background: color-mix(in srgb,var(--text-3) 16%,transparent); color: #c7ced8; border-color: color-mix(in srgb,var(--text-3) 34%,transparent); } .jbs-canceled { background: color-mix(in srgb,var(--red) 14%,transparent); color: #ff9b9b; border-color: color-mix(in srgb,var(--red) 30%,transparent); } .jbs-prog { background: color-mix(in srgb,var(--orange) 12%,transparent); color: #ffb069; border-color: color-mix(in srgb,var(--orange) 25%,transparent); } .jbs-spec { background: color-mix(in srgb,var(--blue) 22%,transparent); color: #8fbfff; border-color: color-mix(in srgb,var(--blue) 45%,transparent); } .jbs-todo { background: color-mix(in srgb,var(--orange) 12%,transparent); color: #ffb36a; border-color: color-mix(in srgb,var(--orange) 28%,transparent); } .jbs-assigned { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 34%, transparent); } .jbs-team-default { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 34%, transparent); } .jbs-team-a { background: color-mix(in srgb,#4C8C93 20%,transparent); color: #9FCDD2; border-color: color-mix(in srgb,#4C8C93 42%,transparent); } .jbs-team-b { background: color-mix(in srgb,#B8697A 20%,transparent); color: #DFAEB8; border-color: color-mix(in srgb,#B8697A 42%,transparent); } .jbs-team-c { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); } .jbs-team-d { background: color-mix(in srgb,#6B79A8 20%,transparent); color: #B7BEDD; border-color: color-mix(in srgb,#6B79A8 42%,transparent); } .jbs-team-e { background: color-mix(in srgb,#A5709E 20%,transparent); color: #D6ACD1; border-color: color-mix(in srgb,#A5709E 42%,transparent); } .jbs-team-f { background: color-mix(in srgb,#5E9678 20%,transparent); color: #A9CDB6; border-color: color-mix(in srgb,#5E9678 42%,transparent); } .triage-cell-row .jbs-team-a:hover { box-shadow: 0 2px 10px color-mix(in srgb, #4C8C93 28%, transparent); } .triage-cell-row .jbs-team-b:hover { box-shadow: 0 2px 10px color-mix(in srgb, #B8697A 28%, transparent); } .triage-cell-row .jbs-team-c:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--violet) 30%, transparent); } .triage-cell-row .jbs-team-d:hover { box-shadow: 0 2px 10px color-mix(in srgb, #6B79A8 28%, transparent); } .triage-cell-row .jbs-team-e:hover { box-shadow: 0 2px 10px color-mix(in srgb, #A5709E 28%, transparent); } .triage-cell-row .jbs-team-f:hover { box-shadow: 0 2px 10px color-mix(in srgb, #5E9678 28%, transparent); } .triage-cell-row .jbs-team-default:hover { box-shadow: 0 2px 10px color-mix(in srgb, var(--violet) 28%, transparent); } .jbs-todo-plain { background: var(--border); color: var(--text-3); border-color: var(--border); } /* Jira status badges — light mode: solid fills + dark text (dark-mode pastels are invisible on light bg) */ [data-theme="light"] .jbs-test { background: #fef3c7; color: #92400e; border-color: #fcd34d; box-shadow: none; } [data-theme="light"] .jbs-staging { background: #dbeafe; color: #1e40af; border-color: #93c5fd; } [data-theme="light"] .jbs-done { background: #dcfce7; color: #166534; border-color: #86efac; } [data-theme="light"] .jbs-cancel { background: #f1f5f9; color: #475569; border-color: #cbd5e1; } [data-theme="light"] .jbs-canceled { background: #fee2e2; color: #991b1b; border-color: #fca5a5; } [data-theme="light"] .jbs-prog { background: #ffedd5; color: #9a3412; border-color: #fdba74; } [data-theme="light"] .jbs-spec { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; } [data-theme="light"] .jbs-todo { background: #fef3c7; color: #b45309; border-color: #fde68a; } [data-theme="light"] .jbs-assigned { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); } [data-theme="light"] .jbs-team-default { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); } [data-theme="light"] .jbs-team-a { background: #E3EEEF; color: #3D6E74; border-color: #A8CDD0; } [data-theme="light"] .jbs-team-b { background: #F3E5E7; color: #8C4356; border-color: #DCAEB6; } [data-theme="light"] .jbs-team-c { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 40%, transparent); } [data-theme="light"] .jbs-team-d { background: #E7E9F1; color: #454E7D; border-color: #B7BEDD; } [data-theme="light"] .jbs-team-e { background: #EFE5EE; color: #7A4C76; border-color: #D6B7D2; } [data-theme="light"] .jbs-team-f { background: #E4EEE8; color: #3D6B4F; border-color: #AFD3BE; } /* Jira issue type icons (RPA story / Tiny RPA subtask) */ .jira-itype { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; vertical-align: -2px; margin-right: 4px; } .jira-itype__svg { display: block; } .jira-itype--rpa { color: #82a854; } .jira-itype--tiny { color: #f87168; } [data-theme="light"] .jira-itype--rpa { color: #5b7f24; } [data-theme="light"] .jira-itype--tiny { color: #c9372c; } [data-theme="light"] .jbs-todo-plain { background: #e6e1d8; color: #5a6470; border-color: #c4bdb2; } [data-theme="light"] .add-triage-btn { border-color: #9ca3af; color: #6b7280; } [data-theme="light"] .add-triage-btn:hover, [data-theme="light"] .add-triage-btn:focus-visible { border-color: #7c3aed; color: #7c3aed; background: rgba(124,58,237,.06); } /* Status cell: badge + optional recurrence pip, stacked/wrapped */ .triage-cell-row { display: flex; align-items: center; justify-content: center; gap: 3px; flex-wrap: wrap; } /* "+" button shown when no Jira ticket is linked (replaces plain "Todo" text) */ .add-triage-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--text-3); background: transparent; color: var(--text-3); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; transition: border-color .15s, color .15s, transform .12s, background .15s; flex-shrink: 0; } .add-triage-btn:hover, .add-triage-btn:focus-visible { border-color: #a855f7; border-style: solid; color: #a855f7; background: rgba(168,85,247,.08); transform: scale(1.18); outline: none; } /* Frequency badge — shared base */ .freq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 0 5px; flex-shrink: 0; } /* Maid recurrence count inside All Occurrences rows */ .maid-recur-count { display: inline-flex; align-items: center; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--yellow); background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.25); border-radius: 8px; padding: 0 5px; vertical-align: middle; line-height: 16px; cursor: default; } [data-theme="light"] .maid-recur-count { color: #92680a; background: rgba(180,130,0,.1); border-color: rgba(180,130,0,.22); } /* Recurring maid count — colored by recurrence tier */ .recur-val { font-size: 11px; font-weight: 700; cursor: default; } .recur-val.recur-low { color: var(--yellow); } .recur-val.recur-mid { color: #f97316; } /* orange */ .recur-val.recur-high { color: var(--red); } /* Recurring-maid icon+count pip attached to the frequency cell */ .recur-pip { display: inline-flex; align-items: center; gap: 1px; font-size: 9.5px; font-weight: 700; vertical-align: middle; cursor: default; } .recur-pip i { font-size: 10px; } .recur-pip.recur-pip-low { color: var(--yellow); } .recur-pip.recur-pip-mid { color: #f97316; } .recur-pip.recur-pip-high { color: var(--red); } /* Frequency cell: count + MV/CC breakdown, side by side */ .freq-cell-row { display: flex; align-items: center; justify-content: center; gap: 5px; } /* MV/CC active-maid breakdown, shown to the right of the frequency number */ .mv-cc-breakdown { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .mv-cc-tag { font-size: 9px; font-weight: 700; line-height: 1.2; padding: 0 4px; border-radius: 4px; white-space: nowrap; } .mv-cc-tag.mv-tag { color: var(--violet); background: var(--violet-dim); } .mv-cc-tag.cc-tag { color: var(--text-3); background: var(--elevated); } /* ── Page header row: title + primary actions ─────────────────────────── */ .page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .page-head-title { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0; } .page-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } /* ── Dashboard KPI strip (compact, single row) ─────────────────────────── */ .kpi-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 14px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .kpi-chip { display: flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; } .kpi-chip-icon { width: 21px; height: 21px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; flex-shrink: 0; } .kpi-chip-icon--violet { background: var(--violet-dim); color: var(--violet); } .kpi-chip-icon--teal { background: var(--teal-dim); color: var(--teal); } .kpi-chip-icon--green { background: var(--green-dim); color: var(--green); } .kpi-chip-icon--amber { background: var(--yellow-dim); color: var(--yellow); } .kpi-chip-val { font-weight: 700; font-size: 13px; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .kpi-chip-val-sub { font-size: 10.5px; font-weight: 600; color: var(--text-3); } .kpi-chip-val--sm { font-size: 12px; font-weight: 600; } .kpi-chip-lbl { font-size: 11px; color: var(--text-3); font-weight: 500; } .kpi-sep { width: 1px; height: 16px; background: var(--border-2); flex-shrink: 0; } .kpi-chip-spark { gap: 5px; } .dash-spark-svg { width: 46px; height: 16px; display: block; flex-shrink: 0; } .kpi-strip-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } @media (max-width: 980px) { .kpi-strip { row-gap: 8px; } .page-head-actions, .kpi-strip-actions { width: 100%; justify-content: flex-start; margin-left: 0; } } /* Dashboard only: compact circle badge */ #groupsTable .freq-badge { width: 30px; height: 30px; min-width: unset; border-radius: 50%; padding: 0; font-size: 11px; } /* Frequency value — plain text with color by tier (replaces circular badge) */ .freq-val { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; } /* Apply color classes directly to freq-val - no backgrounds or borders */ .freq-val.freq-critical { color: var(--red); } .freq-val.freq-high { color: var(--orange); } .freq-val.freq-medium { color: var(--yellow); } .freq-val.freq-low { color: var(--blue); } .freq-critical { background: transparent; border: none; } .freq-high { background: transparent; border: none; } .freq-medium { background: transparent; border: none; } .freq-low { background: transparent; border: none; } .process-name, .process-name-text { font-family: var(--font-sans); font-size: var(--font-body-size); font-weight: normal; line-height: var(--font-body-lh); color: var(--text); } /* Portal tag color families — dark mode (semi-transparent + light text) */ .portal-c0 { background: rgba(79,142,247,.18); color: #93C5FD; } /* blue — IMMIGRATION */ .portal-c1 { background: rgba(167,139,250,.18); color: #C4B5FD; } /* violet */ .portal-c2 { background: rgba(35,209,139,.18); color: #6EE7B7; } /* green — FILL INFO */ .portal-c3 { background: rgba(251,191,36,.18); color: #FCD34D; } /* golden — EID */ .portal-c4 { background: rgba(239,68,68,.18); color: #FCA5A5; } /* red — MOHRE */ .portal-c5 { background: rgba(99,179,237,.18); color: #90CDF4; } /* sky */ .portal-c6 { background: rgba(251,146,60,.18); color: #FBD38D; } /* orange */ .portal-c7 { background: rgba(183,148,246,.18); color: #D6BCFA; } /* purple */ .error-msg, .src-act-text, .rpa-log-text { font-family: var(--font-sans); font-size: 12px; color: var(--text-expandable); line-height: var(--font-body-lh); font-weight: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; transition: color .12s; } .src-act-text { -webkit-line-clamp: 2; } .rpa-log-text { -webkit-line-clamp: 2; font-size: 12px; } .error-msg:hover, .src-act-text:hover, .rpa-log-text:hover { color: var(--text-2); } .error-msg.expanded, .src-act-text.expanded, .rpa-log-text.expanded { display: block; -webkit-line-clamp: unset; -webkit-box-orient: unset; overflow: visible; white-space: pre-wrap; word-break: break-word; color: var(--text); } [data-theme="light"] .error-msg, [data-theme="light"] .src-act-text, [data-theme="light"] .rpa-log-text { color: #626F86; } [data-theme="light"] .error-msg:hover, [data-theme="light"] .src-act-text:hover, [data-theme="light"] .rpa-log-text:hover { color: #44546F; } [data-theme="light"] .error-msg.expanded, [data-theme="light"] .src-act-text.expanded, [data-theme="light"] .rpa-log-text.expanded { color: #172B4D; } .source-activity-cell { font-size: 11.5px; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Test cases stacked */ .tc-stack { display: flex; flex-direction: column; gap: 4px; } .tc-item { display: flex; flex-direction: column; gap: 1px; } .tc-name { font-size: 12px; font-weight: 500; color: var(--text); } .tc-reqid { font-size: 11px; color: var(--text-3); } .tc-sep { height: 1px; background: var(--border-2); margin: 2px 0; } /* Process name row — inline flex so PC tags sit next to process name */ .process-name-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px; } /* Source activity displayed under process name */ .process-source-activity { font-size: 10px; color: var(--text-2); line-height: 1.4; margin-top: 3px; opacity: 1; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } /* Icon + name are inline together — never split across lines */ .process-name-text { display: inline; white-space: normal; word-break: break-word; line-height: 1.4; } .process-name-text .blocker-icon { display: inline-flex; vertical-align: middle; margin-right: 3px; position: relative; top: -1px; } /* PC name tags — bright, no icon */ .pc-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; color: var(--blue); background: rgba(79,142,247,.12); border: 1px solid rgba(79,142,247,.30); border-radius: 3px; padding: 1px 6px; white-space: nowrap; letter-spacing: .3px; } [data-theme="light"] .pc-tag { color: #1d4ed8; background: #dbeafe; border-color: #93c5fd; } /* Age column — time since earliest active error */ .age-hrs { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .2px; border-radius: var(--radius-sm); padding: 1px 6px; white-space: nowrap; cursor: default; } /* Color tiers (applied by JS): green → blue → yellow → red, same tokens everywhere else uses */ .age-fresh { color: var(--green); background: var(--green-dim); } /* 0-1 h */ .age-mild { color: var(--blue); background: var(--blue-dim); } /* 2-4 h */ .age-warn { color: var(--yellow); background: var(--yellow-dim); } /* 5-8 h */ .age-old { color: var(--red); background: var(--red-dim); } /* >8 h */ /* Sortable column headers — dashboard */ .dash-th-sort { cursor: pointer; user-select: none; white-space: nowrap; } .dash-th-sort:hover { color: var(--blue); } .dash-sort-icon { display: inline-block; font-size: 10px; opacity: .6; margin-left: 2px; min-width: 8px; } /* Inline PC tag inside All Occurrences error-meta */ .pc-tag-inline { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; color: var(--blue); background: rgba(79,142,247,.10); border: 1px solid rgba(79,142,247,.25); border-radius: 3px; padding: 1px 5px; white-space: nowrap; } /* PC chip in group detail header */ .chip.chip-pc { font-weight: 700; color: var(--violet) !important; background: var(--violet-dim) !important; border-color: color-mix(in srgb, var(--violet) 30%, transparent) !important; } [data-theme="light"] .chip.chip-pc { color: var(--violet) !important; background: var(--violet-dim) !important; border-color: color-mix(in srgb, var(--violet) 40%, transparent) !important; } /* Clickable rows */ .groups-table tbody tr { cursor: pointer; } /* Slim icon button variant */ .btn-icon-sm { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--elevated); color: var(--text-2); cursor: pointer; transition: all .15s; font-size: 14px; text-decoration: none; flex-shrink: 0; } .btn-icon-sm:hover { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); } .btn-icon-sm.has-link { color: var(--blue); border-color: var(--blue); background: var(--blue-dim); } .btn-icon-sm.disabled, .btn-icon-sm:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; } /* ── Modals ────────────────────────────────────────────── */ .modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .15s ease; } .modal-backdrop-custom.closing { animation: fadeOut .15s ease forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .modal-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: 92vh; animation: slideUp .18s ease; box-shadow: 0 24px 80px rgba(0,0,0,.6); } @keyframes slideUp { from { transform: translateY(16px); opacity:.5; } to { transform: none; opacity:1; } } .modal-sm { width: 420px; } .modal-xl { width: min(95vw, 900px); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); gap: 10px; flex-shrink: 0; } .modal-title { font-size: 14px; font-weight: 600; color: var(--text); } .modal-close { width: 26px; height: 26px; border: none; background: transparent; color: var(--text-3); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all .15s; } .modal-close:hover { background: var(--elevated); color: var(--text); } .modal-body { padding: 18px; overflow-y: auto; flex: 1; } .modal-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } /* Jira link input in modal */ .modal-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 8px 12px; font-size: 13.5px; outline: none; transition: border-color .15s; } .modal-input:focus { border-color: var(--blue); } /* Description textarea */ .desc-textarea { width: 100%; height: 60vh; min-height: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 12px 14px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12.5px; line-height: 1.65; outline: none; resize: vertical; transition: border-color .15s; } .desc-textarea:focus { border-color: var(--blue); } /* ── Group detail page ─────────────────────────────────── */ .detail-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 18px; margin-bottom: 10px; } .detail-process { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; padding: 3px 9px; border-radius: 20px; border: 1px solid transparent; } .chip-blue { background: var(--blue-dim); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 25%, transparent); } .chip-gold { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 25%, transparent); } .chip-green { background: var(--green-dim); color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, transparent); } .chip-yellow { background: var(--yellow-dim); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 25%, transparent); } .chip-muted { background: var(--elevated); color: var(--text-2); border-color: var(--border); } .detail-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } /* ── Detail page tabs ──────────────────────────────────── */ .detail-tabs { display: flex; gap: 3px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-pill); padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; } .detail-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; background: transparent; border: none; border-radius: var(--radius-pill); color: var(--text-3); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .15s, background .15s; white-space: nowrap; } .detail-tab:hover { color: var(--text); } .detail-tab.active { color: var(--violet); background: var(--card); box-shadow: var(--shadow-sm); } .tab-badge { font-size: 10.5px; font-weight: 700; background: var(--elevated); color: var(--text-3); border-radius: 10px; padding: 1px 6px; line-height: 1.5; } .detail-tab.active .tab-badge { background: var(--violet-dim); color: var(--violet); } .tab-pane { animation: fadeIn .12s ease; } /* Lineage tab wrapper */ .lineage-tab-wrap { margin-bottom: 14px; } /* ── Daily breakdown rows ──────────────────────────────── */ .ln-day-row { border-bottom: 1px solid var(--border-2); transition: background .1s; } .ln-day-row:last-child { border-bottom: none; } .ln-day-row:hover { background: var(--card-hover); } .ln-day-main { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; user-select: none; } .ln-day-dow { font-size: 11px; color: var(--text-3); width: 26px; flex-shrink: 0; } .ln-day-date { font-size: 12.5px; font-weight: 500; color: var(--text); width: 88px; flex-shrink: 0; } .ln-day-bar-wrap { flex: 1; height: 8px; background: var(--elevated); border-radius: 4px; overflow: hidden; min-width: 40px; } .ln-day-bar { height: 100%; border-radius: 4px; transition: width .3s ease; } .ln-day-count { font-size: 11.5px; color: var(--text-2); width: 72px; text-align: right; flex-shrink: 0; } .ln-day-chevron { color: var(--text-3); font-size: 11px; flex-shrink: 0; transition: transform .2s; } .ln-day-chevron-open { transform: rotate(90deg); } .ln-day-cases { padding: 0 10px 6px 124px; display: flex; flex-direction: column; gap: 4px; } /* Two-panel layout for description + test cases */ .detail-panels { display: grid; grid-template-columns: 1fr 320px; gap: 14px; margin-bottom: 14px; } @media (max-width: 900px) { .detail-panels { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; overflow: hidden; } .panel-header { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; } .panel-body { padding: 14px; flex: 1; } .panel-body.p0 { padding: 0; } /* Jira description textarea in panel */ .jira-textarea { width: 100%; height: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; line-height: 1.6; outline: none; resize: vertical; } .jira-textarea:focus { border-color: var(--blue); } /* Test case cards */ .tc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; } .tc-card:last-child { margin-bottom: 0; } .tc-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .tc-card-label { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; } .tc-card-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .tc-card-id { font-size: 12px; color: var(--text-2); margin-bottom: 6px; } .tc-card-links { display: flex; flex-direction: column; gap: 4px; } .tc-link { font-size: 11.5px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; border-radius: 3px; padding: 1px 3px; margin: -1px -3px; transition: color .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .tc-link:hover { text-decoration: none; color: var(--blue-dark); background: var(--blue-dim); } /* Resolved-without-Jira button in archive table */ .arc-jira-resolved { color: var(--red) !important; border-color: var(--red) !important; background: rgba(239,68,68,.10) !important; } [data-theme="light"] .arc-jira-resolved { background: #fee2e2 !important; } .jira-resolved-btn { color: var(--red) !important; border-color: var(--red) !important; background: rgba(239,68,68,.12) !important; } [data-theme="light"] .jira-resolved-btn { background: #fee2e2 !important; } /* Maid type badge (CC / MV) */ .tc-maid-type { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: .4px; white-space: nowrap; } .tc-type-cc { background: rgba(16,185,129,.15); color: #10b981; border: 1px solid rgba(16,185,129,.30); } .tc-type-mv { background: rgba(168,85,247,.15); color: #a855f7; border: 1px solid rgba(168,85,247,.30); } [data-theme="light"] .tc-type-cc { background: #d1fae5; color: #047857; border-color: #6ee7b7; } [data-theme="light"] .tc-type-mv { background: #f3e8ff; color: #7c3aed; border-color: #c4b5fd; } /* Inline screenshot preview in test case card */ .tc-screenshot-preview img { display: block; } /* Compact Jira link rows */ .jira-compact-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 4px; border-bottom: 1px solid var(--border); font-size: 12px; } .jira-compact-row:last-child { border-bottom: none; } .jira-compact-url { flex: 1; min-width: 0; color: var(--blue); text-decoration: none; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; transition: color .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .jira-compact-url:hover { text-decoration: none; color: var(--blue-dark); background: var(--blue-dim); } .jira-compact-meta { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; } /* Jira links panel */ .jira-links-panel .panel-header { min-height: 32px; } .jira-links-panel #jiraLinksList { max-height: 260px; overflow-y: auto; } /* Right column in Jira Description tab: Test Cases + Jira Links stacked */ .detail-right-col { display: flex; flex-direction: column; gap: 12px; min-width: 260px; max-width: 340px; flex: 0 0 300px; } /* Test Cases inline panel — compact height */ .detail-right-col .panel:first-child .panel-body { max-height: 140px; overflow-y: auto; } @media (max-width: 900px) { .detail-right-col { max-width: 100%; flex: 1 1 100%; } } /* Freeze indicator */ .freeze-note { font-size: 11px; color: var(--yellow); display: flex; align-items: center; gap: 4px; } /* Errors section */ .errors-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .errors-section-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--card); } /* Error rows */ .error-row { border-bottom: 1px solid var(--border-2); padding: 12px 14px; transition: background .1s; } .error-row:last-child { border-bottom: none; } .error-row:hover { background: var(--card-hover); } .error-row.archived { opacity: .5; } /* Copy Names split button */ .copy-names-group { position: relative; display: flex; align-items: stretch; } .copy-names-group .copy-names-main { border-radius: var(--radius) 0 0 var(--radius); } .copy-names-group .copy-names-arrow { border-radius: 0 var(--radius) var(--radius) 0; } .copy-names-dropdown { position: absolute; top: calc(100% + 4px); right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 210px; z-index: 200; overflow: hidden; } .copy-names-dropdown button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 8px 14px; background: none; border: none; color: var(--text); font-size: 12px; cursor: pointer; text-align: left; } .copy-names-dropdown button:hover { background: var(--card-hover); } /* ── Portal badges (inline on error rows) ── */ .portal-badge { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: .3px; text-transform: uppercase; margin-left: 5px; vertical-align: middle; /* default — overridden by JS colorPortalTags or data-portal CSS */ background: var(--card-hover); color: var(--text-2); border: 1px solid var(--border); } .portal-badge-dim { opacity: .55; } /* Portal count chips in group-detail header */ .chip-portal { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; background: var(--card-hover); border: 1px solid var(--border); color: var(--text-2); } .chip-portal-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 800; background: rgba(255,255,255,.12); margin-left: 2px; } /* Resolve modal — "Including test cases" checkbox row */ .resolve-tc-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); cursor: pointer; padding: 6px 10px; border-radius: var(--radius); background: var(--card-hover); border: 1px solid var(--border); } .resolve-tc-label input[type="checkbox"] { cursor: pointer; width: 14px; height: 14px; accent-color: var(--green); } /* All Occurrences — 3-section labels */ .occ-section-label { display: flex; align-items: center; gap: 6px; padding: 5px 14px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border-2); border-top: 1px solid var(--border-2); margin-top: 2px; } .occ-label-tc { background: color-mix(in srgb, var(--yellow) 8%, var(--surface)); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 20%, var(--border)); } .occ-label-active { background: color-mix(in srgb, var(--blue) 7%, var(--surface)); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 18%, var(--border)); } .occ-label-historical { background: var(--surface); color: var(--text-3); } /* Test case row: subtle golden left border */ .occ-row-tc { border-left: 3px solid var(--yellow); padding-left: 11px; } /* Star toggle button on occurrence rows */ .occ-tc-toggle { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer; font-size: 12px; flex-shrink: 0; transition: background .15s, color .15s, border-color .15s, transform .1s; } .occ-tc-toggle:hover { background: color-mix(in srgb, var(--yellow) 15%, var(--surface)); color: var(--yellow); border-color: var(--yellow); transform: scale(1.1); } .occ-tc-toggle--on { background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); color: var(--yellow); border-color: var(--yellow); } .occ-tc-toggle--on:hover { background: color-mix(in srgb, var(--red) 15%, var(--surface)); color: var(--red); border-color: var(--red); } /* Historical row: dimmed */ .occ-row-historical { opacity: .55; } .error-row-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .error-maid { font-weight: 600; font-size: 13.5px; color: var(--text); } .error-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .error-date { font-size: 11.5px; color: var(--text-3); } .error-reqid { font-size: 12px; color: var(--blue); text-decoration: none; border-radius: 3px; padding: 0 3px; margin: 0 -3px; transition: color .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .error-reqid:hover { text-decoration: none; color: var(--blue-dark); background: var(--blue-dim); } .badge-stage { font-size: 11px; color: var(--text-3); background: var(--elevated); padding: 2px 7px; border-radius: var(--radius-sm); } .badge-status { font-size: 11px; padding: 2px 7px; border-radius: var(--radius-sm); } .badge-pending { background: var(--yellow-dim); color: var(--yellow); } .badge-under-process { background: var(--blue-dim); color: var(--blue); } .error-screenshot { font-size: 11.5px; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid rgba(79,126,248,.25); border-radius: 4px; background: var(--blue-dim); } .error-screenshot:hover { background: var(--blue-hover); } /* Stacktrace — always visible, click to expand */ .stacktrace-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 12px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 80px; overflow: hidden; cursor: pointer; transition: max-height .25s ease; } .stacktrace-box strong { display: inline; margin-right: 4px; } .stacktrace-box:hover { border-color: var(--border); opacity: .95; } .stacktrace-box.expanded { max-height: 800px; } /* RPA Log — collapsible like stacktrace */ .rpa-log-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; padding: 10px 12px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 11px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 60px; overflow: hidden; cursor: pointer; transition: max-height .25s ease; } .rpa-log-box strong { display: inline; margin-right: 4px; } .rpa-log-box:hover { border-color: var(--border); opacity: .95; } .rpa-log-box.expanded { max-height: 800px; } .rpa-log-label { font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; } .rpa-log-content { color: var(--text-2); } /* ── Breadcrumb ────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-bottom: 14px; } .breadcrumb a { color: var(--blue); text-decoration: none; border-radius: 3px; padding: 1px 4px; margin: -1px -4px; transition: color .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .breadcrumb a:hover { text-decoration: none; color: var(--blue-dark); background: var(--blue-dim); } .breadcrumb-sep { color: var(--border); } /* ── Archive page ──────────────────────────────────────── */ .archive-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 10px; transition: background .1s; } .archive-item:hover { background: var(--card-hover); } .archive-process { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; } .archive-msg { font-size: 13px; color: var(--text-2); } /* Archive sortable headers */ .arc-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color .12s var(--ease-out, ease); } .arc-th-sort:hover { color: var(--blue); background: color-mix(in srgb, var(--link) 6%, transparent); } .arc-sort-icon { font-size: 11px; color: var(--blue); margin-left: 2px; } /* Archive table rows */ .arc-row { cursor: pointer; } .arc-row:hover .process-name { color: var(--blue); } /* Archive column header sort styling */ .arc-th-sort { cursor: pointer; user-select: none; text-align: left; } .arc-th-sort:hover { color: var(--accent); } .arc-sort-icon { font-size: 10px; margin-left: 2px; color: var(--accent); } .arc-error-preview { font-size: 11.5px; color: var(--text-3); margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; } /* Loading state cell */ .arc-loading { text-align: center; padding: 40px !important; color: var(--text-3); font-size: 13px; } /* Pagination */ .arc-pager { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 14px 0 4px; flex-wrap: wrap; } .arc-page-btn { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 13px; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; } .arc-page-btn:hover:not(:disabled) { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); } .arc-page-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; } .arc-page-btn:disabled { opacity: .35; cursor: not-allowed; } .arc-page-ellipsis { color: var(--text-3); padding: 0 4px; font-size: 13px; } .arc-page-info { font-size: 12px; color: var(--text-3); margin-left: 8px; } /* ── Export Dropdown ───────────────────────────────────── */ .export-dropdown { position: relative; flex-shrink: 0; } .export-trigger { display: flex; align-items: center; gap: 4px; } .export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); min-width: 260px; overflow: hidden; } .export-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: none; border: none; padding: 10px 14px; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; border-bottom: 1px solid var(--border-2); transition: background .15s; } .export-menu-item:last-child { border-bottom: none; } .export-menu-item:hover { background: var(--card-hover); } .export-menu-item > .bi { font-size: 16px; color: var(--blue); margin-top: 2px; flex-shrink: 0; } /* ── Assign split button (Assign & Notify / Assign Only) ─ */ .assign-split-wrap { position: relative; display: flex; width: 100%; } .modal-footer .assign-split-wrap { width: auto; flex: 1; justify-content: flex-end; } .assign-split-main { flex: 1; justify-content: center; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: 1px solid rgba(255,255,255,.25) !important; } .assign-split-caret { width: 36px; min-width: 36px; padding: 0 !important; justify-content: center; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .assign-split-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 200; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); min-width: 170px; overflow: hidden; } .assign-split-menu button { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; padding: 10px 14px; cursor: pointer; color: var(--text); font-size: 13px; text-align: left; } .assign-split-menu button:hover { background: var(--card-hover); } .assign-split-menu button .bi { color: #a855f7; } .jira-older-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; font-size: 11px; color: var(--text-3); text-decoration: none; border-radius: 6px; transition: background .15s, color .15s; } .jira-older-hint:hover { background: var(--card-hover); color: var(--blue); } /* ── Lineage Modal ─────────────────────────────────────── */ .modal-lineage { width: min(96vw, 860px); max-height: 92vh; } .ln-stats-row { display: flex; gap: 0; border-bottom: 1px solid var(--border); background: var(--card); flex-shrink: 0; } .ln-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-right: 1px solid var(--border-2); gap: 2px; } .ln-stat:last-child { border-right: none; } .ln-stat-val { font-size: 15px; font-weight: 700; color: var(--text); } .ln-stat-key { font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; } .ln-section { padding: 14px 18px; border-bottom: 1px solid var(--border-2); } .ln-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; } /* Error pre */ .ln-error-pre { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 11.5px; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow-y: auto; margin: 0; } /* Timeline bar chart */ .ln-timeline { display: flex; align-items: flex-end; gap: 4px; height: 120px; overflow-x: auto; padding: 4px 0 0; } .ln-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 40px; height: 100%; cursor: default; } .ln-bar-count { font-size: 10px; color: var(--text-3); font-weight: 600; line-height: 1; } .ln-bar { width: 28px; border-radius: 3px 3px 0 0; transition: opacity .15s; min-height: 4px; } .ln-bar-col:hover .ln-bar { opacity: .75; } .ln-bar.freq-critical { background: var(--red); } .ln-bar.freq-high { background: var(--orange); } .ln-bar.freq-medium { background: var(--yellow); } .ln-bar.freq-low { background: var(--blue); } /* Jira week marker on timeline bar */ .ln-jira-marker { display: inline-flex; align-items: center; gap: 2px; background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.25); border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: default; } .ln-jira-spacer { display: block; height: 18px; } .ln-bar-label { font-size: 9.5px; color: var(--text-3); white-space: nowrap; transform: rotate(-30deg); transform-origin: top center; line-height: 1; margin-top: 2px; } /* Recent errors list */ .ln-recent { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; } .ln-error-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border-2); gap: 8px; } .ln-error-row.ln-active { border-color: rgba(91,138,245,.25); background: var(--blue-dim); } .ln-maid { font-size: 12.5px; font-weight: 500; color: var(--text); } .ln-reqid { font-size: 11.5px; color: var(--blue); } .ln-date { font-size: 11px; color: var(--text-3); margin-left: auto; } .ln-active-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); background: var(--blue-dim); border-radius: 3px; padding: 1px 5px; } /* Jira links list in lineage */ .ln-jira-list { display: flex; flex-direction: column; gap: 4px; } .ln-jira-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--border-2); } .ln-jira-url { font-size: 12.5px; color: var(--blue); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; border-radius: 3px; padding: 1px 4px; margin: -1px -4px; transition: color .15s var(--ease-out, ease), background .15s var(--ease-out, ease); } .ln-jira-url:hover { text-decoration: none; color: var(--blue-dark); background: var(--blue-dim); } .ln-jira-label { font-size: 11px; color: var(--text-3); display: block; margin-top: 1px; } .ln-jira-date { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; } /* Day Jira badge in daily breakdown */ .ln-day-jira-badge { display: inline-flex; align-items: center; gap: 2px; background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,.2); border-radius: 10px; padding: 1px 6px; font-size: 10.5px; font-weight: 600; flex-shrink: 0; cursor: default; } /* ── Empty state ───────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 20px; color: var(--text-3); } .empty-icon { font-size: 40px; display: block; margin-bottom: 12px; } .empty-title { font-size: 16px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } /* ── Toast ─────────────────────────────────────────────── */ .toast-area { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .toast-item { background: var(--elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 8px; min-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: slideUp .2s ease; transition: opacity .3s; } .toast-item.hiding { opacity: 0; } /* ── Quill editor dark theme overrides ─────────────────── */ .ql-toolbar.ql-snow { background: var(--elevated); border-color: var(--border) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 6px 10px; } .ql-container.ql-snow { background: var(--surface); border-color: var(--border) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 13.5px; } .ql-editor { color: var(--text); min-height: 200px; line-height: 1.6; } .ql-editor.ql-blank::before { color: var(--text-3); font-style: normal; } .ql-snow .ql-stroke { stroke: var(--text); } .ql-snow .ql-fill { fill: var(--text); } .ql-snow .ql-picker { color: var(--text); } .ql-snow .ql-picker-options { background: var(--elevated); border-color: var(--border); } .ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-item.ql-selected { color: var(--blue); } .ql-toolbar.ql-snow .ql-formats button:hover .ql-stroke, .ql-toolbar.ql-snow .ql-formats button.ql-active .ql-stroke { stroke: var(--blue); } .ql-toolbar.ql-snow .ql-formats button:hover .ql-fill, .ql-toolbar.ql-snow .ql-formats button.ql-active .ql-fill { fill: var(--blue); } /* Quill inside group_detail panel */ .panel .ql-container.ql-snow { min-height: 200px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); } .panel .ql-toolbar.ql-snow { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } /* Horizontal rule inside Quill editor */ .ql-editor hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; display: block; } /* ── Utilities ─────────────────────────────────────────── */ .text-blue { color: var(--blue); } .text-muted { color: var(--text-3); } .text-dim { color: var(--text-2); } .fw-600 { font-weight: 600; } .gap-6 { gap: 6px; } .flex-center { display: flex; align-items: center; } .ms-auto { margin-left: auto; } .d-flex { display: flex; } .flex-col { flex-direction: column; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin .8s linear infinite; display: inline-block; } /* ── Theme toggle button ─────────────────────────────────── */ .btn-theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; transition: color .2s, border-color .2s, background .2s; margin-right: 8px; } .btn-theme-toggle:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-dim); } /* ── Light-mode specific overrides ──────────────────────── */ [data-theme="light"] body { color: var(--text); } [data-theme="light"] .app-nav { box-shadow: 0 1px 0 var(--border); } [data-theme="light"] .ql-toolbar.ql-snow, [data-theme="light"] .ql-container.ql-snow { border-color: var(--border); } [data-theme="light"] .nav-logo { background: var(--blue); color: #fff; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border); } [data-theme="light"] ::selection { background: var(--blue-dim); color: var(--text); } /* Ghost buttons — subtle elevated fill, palette-native */ [data-theme="light"] .btn-ghost { background: var(--elevated); color: var(--text-2); border-color: var(--border); } [data-theme="light"] .btn-ghost:hover { background: var(--card-hover); border-color: var(--blue); color: var(--blue); } /* Icon buttons — same elevated style */ [data-theme="light"] .btn-icon, [data-theme="light"] .btn-icon-sm { background: var(--elevated); color: var(--text-2); border-color: var(--border); } [data-theme="light"] .btn-icon:hover, [data-theme="light"] .btn-icon-sm:hover { background: var(--blue-hover); border-color: var(--blue); color: var(--blue); } [data-theme="light"] .btn-icon.has-link, [data-theme="light"] .btn-icon-sm.has-link { background: var(--blue-dim); border-color: rgba(29,78,216,.35); color: var(--blue); } /* Filter inputs + selects — clean white with clear border */ [data-theme="light"] .filter-input, [data-theme="light"] .filter-select { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="light"] .filter-input::placeholder { color: var(--text-3); } [data-theme="light"] .filter-input:focus, [data-theme="light"] .filter-select:focus { border-color: var(--blue); outline: none; } [data-theme="light"] .filter-icon-toggle { background: var(--elevated); border-color: var(--border); color: var(--text-3); } [data-theme="light"] .filter-icon-toggle.filt-active { background: var(--violet-dim); border-color: var(--violet); color: var(--violet); } /* Modal inputs */ [data-theme="light"] .modal-input { background: var(--surface); border-color: var(--border); color: var(--text); } /* Chips — vivid borders */ [data-theme="light"] .chip-blue { border-color: rgba(29,78,216,.30); } [data-theme="light"] .chip-green { border-color: rgba(21,128,61,.30); } [data-theme="light"] .chip-yellow { border-color: rgba(146,64,14,.30); } [data-theme="light"] .chip-muted { border-color: var(--border); } /* Freq badges — soft colored backgrounds */ [data-theme="light"] .freq-critical { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; } [data-theme="light"] .freq-high { background: #FFEDD5; color: #C2410C; border-color: #FED7AA; } [data-theme="light"] .freq-medium { background: #FEF3C7; color: #92400E; border-color: #FDE68A; } [data-theme="light"] .freq-low { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; } [data-theme="light"] .groups-table tbody tr:hover { background: var(--card-hover) !important; } /* Portal tag colors — light mode */ [data-theme="light"] .portal-c0 { background: #DBEAFE; color: #1E40AF; } /* blue — IMMIGRATION */ [data-theme="light"] .portal-c1 { background: #EDE9FE; color: #5B21B6; } /* violet */ [data-theme="light"] .portal-c2 { background: #D1FAE5; color: #065F46; } /* green — FILL INFO */ [data-theme="light"] .portal-c3 { background: #FEF9C3; color: #854D0E; } /* golden — EID */ [data-theme="light"] .portal-c4 { background: #FEE2E2; color: #B91C1C; } /* red — MOHRE */ [data-theme="light"] .portal-c5 { background: #E0F2FE; color: #075985; } /* sky */ [data-theme="light"] .portal-c6 { background: #FFEDD5; color: #9A3412; } /* orange */ [data-theme="light"] .portal-c7 { background: #F3E8FF; color: #6B21A8; } /* purple */ /* ═══════════════════════════════════════════════════════════════════════════ PC Analysis page ═══════════════════════════════════════════════════════════════════════════ */ /* ── Page header ── */ .pca-page-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; } .pca-page-title { display: flex; align-items: center; gap: 12px; } .pca-page-title > i { font-size: 26px; color: var(--accent); flex-shrink: 0; } .pca-page-title h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.2; } .pca-page-title p { margin: 2px 0 0; font-size: 12px; color: var(--text-3); } /* ── Stat cards ── */ .pca-stats { display: flex; gap: 10px; flex-wrap: wrap; } .pca-stat-card { display: flex; flex-direction: column; align-items: center; padding: 9px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); min-width: 88px; gap: 2px; } .pca-stat-danger { border-color: rgba(239,68,68,.35); } .pca-stat-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; } .pca-stat-danger .pca-stat-num { color: #ef4444; } .pca-stat-lbl { font-size: 9.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } /* ── Empty full-page state ── */ .pca-empty-page { display: flex; flex-direction: column; align-items: center; padding: 100px 20px; color: var(--text-3); text-align: center; font-size: 14px; gap: 10px; } .pca-empty-page i { font-size: 52px; opacity: .25; } /* ── Two-column grid ── */ .pca-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .pca-grid { grid-template-columns: 1fr; } } /* ── Panel header (shared) ── */ .pca-panel-hd { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text); padding: 12px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .pca-hd-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--accent-muted); color: var(--accent); } /* ── Left panel: bar list ── */ .pca-chart-panel { display: flex; flex-direction: column; overflow: hidden; } .pca-bars-wrap { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100vh - 200px); } .pca-bar-row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; cursor: pointer; transition: background .12s, border-color .12s; border: 1px solid transparent; min-width: 0; } .pca-bar-row:hover { background: var(--card-hover); } .pca-bar-row.selected { background: var(--card-hover); border-color: var(--border); } .pca-bar-row.pca-tier-crit.selected { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); } .pca-bar-row.pca-tier-high.selected { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.35); } .pca-bar-row.pca-tier-med.selected { background: rgba(234,179,8,.07); border-color: rgba(234,179,8,.35); } .pca-bar-row.pca-tier-low.selected { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.35); } /* Tier dot */ .pca-tier-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .pca-dot-crit { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,.65); } .pca-dot-high { background: #f97316; box-shadow: 0 0 5px rgba(249,115,22,.55); } .pca-dot-med { background: #eab308; box-shadow: 0 0 5px rgba(234,179,8,.5); } .pca-dot-low { background: #3b82f6; box-shadow: 0 0 5px rgba(59,130,246,.5); } /* Label (fixed-width so track always starts at same x) */ .pca-bar-label { display: flex; align-items: center; gap: 6px; width: 56px; min-width: 56px; max-width: 56px; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Track — fills all remaining space; overflow: hidden clips the fill */ .pca-bar-track { flex: 1; min-width: 0; height: 18px; border-radius: 4px; background: var(--card-hover); overflow: hidden; } .pca-bar-fill { height: 100%; border-radius: 4px; min-width: 3px; transition: width .45s cubic-bezier(.4,0,.2,1); } /* Count — fixed width to the right of the track, no overflow */ .pca-bar-num { width: 26px; min-width: 26px; text-align: right; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* ── Right panel: process breakdown ── */ .pca-detail-panel { display: flex; flex-direction: column; overflow: hidden; } .pca-detail-body { padding: 10px 18px 18px; overflow-y: auto; max-height: calc(100vh - 200px); } .pca-empty-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 55px 20px; color: var(--text-3); text-align: center; font-size: 13px; } .pca-empty-hint i { font-size: 34px; opacity: .28; } /* Process list rows */ .pca-proc-list { display: flex; flex-direction: column; gap: 10px; } .pca-proc-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .pca-proc-rank { width: 20px; min-width: 20px; height: 20px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; flex-shrink: 0; } .pca-rank-crit { background: rgba(239,68,68,.15); color: #ef4444; border: 1px solid rgba(239,68,68,.3); } .pca-rank-high { background: rgba(249,115,22,.15); color: #f97316; border: 1px solid rgba(249,115,22,.3); } .pca-rank-med { background: rgba(234,179,8,.15); color: #ca8a04; border: 1px solid rgba(234,179,8,.3); } .pca-rank-low { background: rgba(59,130,246,.15); color: #3b82f6; border: 1px solid rgba(59,130,246,.3); } .pca-proc-info { flex: 1; min-width: 0; } /* Name + count on one line, count right-aligned */ .pca-proc-header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; } .pca-proc-name { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .pca-proc-cnt { font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } /* Sub-bar (no absolute positioning needed now) */ .pca-proc-track { height: 10px; border-radius: 3px; background: var(--card-hover); overflow: hidden; } .pca-proc-fill { height: 100%; border-radius: 3px; min-width: 3px; transition: width .4s ease; } /* Shared fill colors */ .pca-fill-crit { background: linear-gradient(90deg,#ef4444,#f87171); } .pca-fill-high { background: linear-gradient(90deg,#f97316,#fb923c); } .pca-fill-med { background: linear-gradient(90deg,#eab308,#facc15); } .pca-fill-low { background: linear-gradient(90deg,#3b82f6,#60a5fa); } /* Shared count colors */ .pca-num-crit { color: #ef4444; } .pca-num-high { color: #f97316; } .pca-num-med { color: #eab308; } .pca-num-low { color: #3b82f6; } /* ── Light mode overrides ── */ [data-theme="light"] .pca-stat-danger { border-color: rgba(220,38,38,.3); } [data-theme="light"] .pca-stat-danger .pca-stat-num { color: #dc2626; } [data-theme="light"] .pca-dot-crit { background: #dc2626; box-shadow: none; } [data-theme="light"] .pca-dot-high { background: #ea580c; box-shadow: none; } [data-theme="light"] .pca-dot-med { background: #ca8a04; box-shadow: none; } [data-theme="light"] .pca-dot-low { background: #2563eb; box-shadow: none; } [data-theme="light"] .pca-num-crit { color: #dc2626; } [data-theme="light"] .pca-num-high { color: #ea580c; } [data-theme="light"] .pca-num-med { color: #92400e; } [data-theme="light"] .pca-num-low { color: #1d4ed8; } [data-theme="light"] .pca-rank-med { color: #92400e; } [data-theme="light"] .pca-fill-med { background: linear-gradient(90deg,#ca8a04,#eab308); } /* Responsive: stack panels on narrow screens */ @media (max-width: 640px) { .pca-page-hd { flex-direction: column; align-items: flex-start; } .pca-bars-wrap, .pca-detail-body { max-height: 50vh; } .pca-stat-card { padding: 7px 14px; } } /* ── Multi-select checkboxes ───────────────────────────── */ .col-sel { width: 30px; text-align: left; padding: 0 6px 0 14px !important; vertical-align: middle; } /* Custom palette-matching checkboxes */ .row-sel, .arc-row-sel, .col-sel input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; display: block; margin: 0 auto; transition: background .12s, border-color .12s; flex-shrink: 0; } .row-sel:hover:not(:checked), .arc-row-sel:hover:not(:checked), .col-sel input[type="checkbox"]:hover:not(:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface)); } .row-sel:checked, .arc-row-sel:checked, .col-sel input[type="checkbox"]:checked { background: var(--blue); border-color: var(--blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10 2.5L4.8 7.8 2.5 5.5 1.5 6.5l3.3 3.3 6.2-6.2z'/%3E%3C/svg%3E"); background-size: 10px; background-position: center; background-repeat: no-repeat; } /* ── Bulk action bar ──────────────────────────────────── */ .bulk-action-bar { position: fixed; bottom: -70px; left: 50%; transform: translateX(-50%); transition: bottom .22s cubic-bezier(.4,0,.2,1); background: var(--elevated); border: 1px solid var(--border); border-radius: 14px; padding: 8px 14px 8px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 28px rgba(0,0,0,.45); z-index: 900; white-space: nowrap; } .bulk-action-bar.visible { bottom: 20px; } .bulk-sel-count { font-size: 12px; font-weight: 600; color: var(--text-2); padding-right: 8px; border-right: 1px solid var(--border); margin-right: 2px; } .bulk-sel-count strong { color: var(--blue); } .bulk-action-bar .btn { font-size: 12px; padding: 5px 10px; } /* Highlight selected rows */ tr.row-selected { background: color-mix(in srgb, var(--blue) 8%, var(--surface)) !important; } tr.row-selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); } [data-theme="light"] tr.row-selected { background: color-mix(in srgb, var(--blue) 6%, #fff) !important; } /* ========================================================= ═════ POLISH LAYER — 2026 Q2 design refinement ═════ Additive enhancements. Does not redefine layout/structure. ========================================================= */ /* ── Elevation tokens (subtle, theme-aware) ─────────────── */ :root { --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; --shadow-md: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05) inset; --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset; --shadow-glow-blue: 0 0 0 1px var(--violet), 0 6px 20px color-mix(in srgb, var(--violet) 26%, transparent); --ease-out: cubic-bezier(.2,.7,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); } [data-theme="light"] { --shadow-sm: 0 1px 3px rgba(30,20,60,.09), 0 0 0 1px rgba(30,20,60,.05); --shadow-md: 0 12px 30px rgba(30,20,60,.16), 0 2px 6px rgba(30,20,60,.08); --shadow-lg: 0 22px 50px rgba(30,20,60,.20), 0 3px 8px rgba(30,20,60,.10); --shadow-glow-blue: 0 0 0 1px var(--violet), 0 6px 18px color-mix(in srgb, var(--violet) 20%, transparent); } /* ── Selection color matches brand ──────────────────────── */ ::selection { background: var(--blue); color: #fff; } /* ── Refined scrollbars (slightly thicker, with corner) ── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; transition: background .15s; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-corner { background: transparent; } * { scrollbar-color: var(--border) transparent; scrollbar-width: thin; } /* ── Premium focus rings (keyboard only) ────────────────── */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-sm); } button:focus-visible, .btn:focus-visible, .btn-icon:focus-visible, .team-pill:focus-visible, .token-pill:focus-visible, .btn-theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } input:focus-visible, select:focus-visible, textarea:focus-visible, .filter-input:focus-visible, .filter-select:focus-visible, .modal-input:focus-visible { outline: none; border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-dim) !important; } /* ── Navbar refinement — solid Atlassian bar (no glass blur) ── */ .app-nav { background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: none; } .nav-link { position: relative; transition: color .15s var(--ease-out), background .15s var(--ease-out); } .nav-link::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -6px; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease-spring); } .nav-link.active::after { transform: scaleX(1); } .nav-link.active { background: transparent; } .nav-link.active:hover { background: var(--blue-dim); } /* Token pill — soft glow when valid */ .token-pill { transition: border-color .18s var(--ease-out), background .18s var(--ease-out), color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .token-pill:has(.dot-valid) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 20%, transparent); } .token-pill:has(.dot-invalid) { box-shadow: inset 0 0 0 1px rgba(239,68,68,.15); } .token-pill:has(.dot-missing) { box-shadow: inset 0 0 0 1px rgba(234,179,8,.15); } .token-dot { transition: box-shadow .25s var(--ease-out); } /* ── Stats bar — premium tile feel ─────────────────────── */ .stats-bar { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--bg))); border-bottom: 1px solid var(--border); } .stat-item { position: relative; transition: background .18s var(--ease-out); } .stat-item::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--border-2); } .stat-item:first-child::before { display: none; } .stat-item { border-right: none; } .stat-val { font-family: var(--font-sans); letter-spacing: -.01em; } /* ── Buttons — refined micro-interactions ──────────────── */ .btn { transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out); font-family: var(--font-sans); letter-spacing: .01em; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--shadow-sm); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px rgba(79,142,247,.32); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(29,78,216,.22); } .btn:disabled, .btn[disabled] { transform: none !important; box-shadow: none !important; cursor: not-allowed; } .btn-icon { transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out); } .btn-icon:hover { transform: translateY(-1px); } /* ── Inputs / selects — refined ────────────────────────── */ .filter-input, .filter-select, .modal-input { transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s var(--ease-out); } .filter-input:hover, .filter-select:hover { border-color: var(--text-3); } .filter-input:focus, .filter-select:focus, .modal-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); } /* ── Filter bar — refined depth + breathing ─────────────── */ .filter-bar { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 94%, var(--bg))); box-shadow: var(--shadow-sm); } /* ── Team pills — premium pill feel ─────────────────────── */ .team-pill { transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .12s var(--ease-out), box-shadow .15s var(--ease-out); letter-spacing: .25px; } .team-pill:hover { transform: translateY(-1px); opacity: 1; border-color: currentColor; } .team-pill.active { box-shadow: 0 2px 8px color-mix(in srgb, currentColor 22%, transparent); } /* ── Tables — refined zebra + smooth hover ──────────────── */ .groups-wrap { box-shadow: var(--shadow-sm); } .groups-table thead tr { background: color-mix(in srgb, var(--card) 92%, var(--bg)); position: relative; } .groups-table thead th { font-weight: 700; } .groups-table tbody tr { transition: background .12s var(--ease-out); } .dash-th-sort { cursor: pointer; user-select: none; transition: color .12s var(--ease-out), background .12s var(--ease-out); } .dash-th-sort:hover { color: var(--text) !important; background: var(--card-hover); } /* ── Cards (generic) — gentle hover lift ───────────────── */ .card { transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out), transform .12s var(--ease-out); } /* ── Modals — refined depth ───────────────────────────── */ /* IMPORTANT: modal-backdrop-custom MUST have position:fixed + align-items:center. Never add transform/filter to
or any ancestor of the modal — it breaks fixed positioning by making the transformed element the containing block. */ .modal-backdrop-custom { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* Reinforce centering in case any ancestor stylesheet overrides it */ align-items: center !important; justify-content: center !important; } .modal-box { box-shadow: var(--shadow-lg); } .modal-input { transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out); } /* ── PC Health — premium topbar + tabs ──────────────────── */ .pch-topbar { background: linear-gradient(180deg, var(--elevated), color-mix(in srgb, var(--elevated) 90%, var(--bg))); box-shadow: var(--shadow-sm); } .pch-title { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.01em; font-size: 16px; } .pch-infobar { background: color-mix(in srgb, var(--surface) 96%, var(--bg)); border-radius: 999px; padding: 4px 14px; box-shadow: var(--shadow-sm); } .pch-infobar-val { font-family: var(--font-sans); letter-spacing: -.01em; } .pch-tab { position: relative; transition: color .15s var(--ease-out); letter-spacing: .15px; } .pch-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--blue); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease-spring); } .pch-tab:hover::after { transform: scaleX(.6); opacity: .55; } .pch-tab.active::after { transform: scaleX(1); opacity: 1; } .pch-tab.active { border-bottom-color: transparent !important; } .pch-tab:focus-visible { outline-offset: -2px; } /* Tabs row baseline so animated underline reads cleanly */ .pch-tabs-row { border-bottom: 1px solid var(--border); } /* Fetch button — keep its custom glow */ .pch-btn-fetch { font-family: var(--font-sans); } /* ── PC Health: card hover lift ────────────────────────── */ .pch-mon { transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); } .pch-mon:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ── Flash banners — refined ───────────────────────────── */ .page-content > div[style*="background:var(--green-dim)"], .page-content > div[style*="background:var(--red-dim)"], .page-content > div[style*="background:var(--blue-dim)"], .page-content > div[style*="background:var(--yellow-dim)"] { box-shadow: var(--shadow-sm); border-radius: var(--radius-lg) !important; } /* ── Skeleton loading shimmer (utility class) ──────────── */ @keyframes pulse-shimmer { 0%, 100% { opacity: .55; } 50% { opacity: .25; } } .pch-grid-empty, .pch-loading-msg { animation: pulse-shimmer 1.6s var(--ease-out) infinite; } /* ── Soft entrance for tab panel switch ────────────────── */ .pch-panel.active { animation: fadeInUp .28s var(--ease-out) both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── Improved sticky table thead under tab/topbar ──────── */ .groups-table thead th { backdrop-filter: blur(4px); } /* ── Filter search input — subtle glow on focus ────────── */ .filter-search input:focus { box-shadow: 0 0 0 3px var(--blue-dim); border-color: var(--blue); } /* ── Theme toggle button — refined ─────────────────────── */ .btn-theme-toggle { transition: background .15s var(--ease-out), border-color .15s var(--ease-out), color .15s var(--ease-out), transform .25s var(--ease-spring); } .btn-theme-toggle:hover { transform: rotate(-12deg); } /* ── Smooth horizontal carousels ────────────────────────── */ .pch-attn-body { scroll-behavior: smooth; } .pch-attn-body::-webkit-scrollbar { height: 6px; } /* ── Improved disabled inputs ──────────────────────────── */ input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: color-mix(in srgb, var(--bg) 50%, var(--card)); } /* ── Section card heading consistency ──────────────────── */ .card-header .card-title { font-family: var(--font-sans); letter-spacing: -.01em; } /* ── Improve number rendering across the app ───────────── */ .stat-val, .pch-infobar-val, .ana-stat-num, .ana-hero-num, .freq-val, .recur-val { font-variant-numeric: tabular-nums; } /* ═════════════════════════════════════════════════════════ ROBO BRAND SYSTEM — Teal · Amber · Warm neutrals Calm, professional, distinct from status colors. ═════════════════════════════════════════════════════════ */ :root { /* Brand accents alias to the main violet/teal tokens so nav, PC Health and any --accent-* consumer stay in sync with the rest of the app. */ --accent-1: var(--violet); --accent-2: var(--teal); --accent-3: #f59e0b; /* amber-500 — warm highlight, unrelated to brand hue */ --accent-grad: linear-gradient(135deg, var(--violet) 0%, var(--teal) 100%); /* Ambient page glow */ --hero-grad-dark: radial-gradient(ellipse 900px 460px at 18% -15%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 62%), radial-gradient(ellipse 700px 380px at 96% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 65%); --hero-grad-light: radial-gradient(ellipse 900px 460px at 18% -15%, color-mix(in srgb, var(--violet) 6%, transparent), transparent 62%), radial-gradient(ellipse 700px 380px at 96% 0%, color-mix(in srgb, var(--teal) 5%, transparent), transparent 65%); } /* ════ NAVBAR — Jira-style 48px ════ */ .app-nav { height: 48px !important; padding: 0 16px !important; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); gap: 18px !important; display: flex; align-items: center; position: sticky; top: 0; z-index: 1000; } [data-theme="light"] .app-nav { background: color-mix(in srgb, var(--surface) 94%, transparent); } .nav-brand { padding: 0 !important; border: none !important; background: none !important; gap: 9px !important; transition: opacity .2s var(--ease-out); } .nav-brand:hover { transform: none !important; box-shadow: none !important; opacity: .85; } .nav-logo-img { display: none !important; } .nav-logo-svg { width: 26px; height: 26px; flex-shrink: 0; } .nav-logo-pulse { transform-origin: 50px 16px; animation: navpulse 2.4s ease-in-out infinite; } @keyframes navpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .nav-title { font-family: var(--font-sans); font-weight: 600 !important; font-size: 13px !important; letter-spacing: -0.01em; color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; background: none !important; } .nav-links { gap: 4px !important; } .nav-link { font-size: 13px !important; padding: 12px 12px !important; border-radius: 0 !important; font-weight: 500; color: var(--text-2); position: relative; } .nav-link i { font-size: 12px; opacity: .85; } .nav-link:hover { background: transparent !important; color: var(--text) !important; } .nav-link.active { color: var(--link) !important; background: transparent !important; font-weight: 500 !important; box-shadow: inset 0 -2px 0 var(--link) !important; } .nav-link::after { display: none !important; } .nav-link.active i { color: var(--link); opacity: 1; } /* Token pill — refined */ .token-pill { padding: 5px 12px 5px 9px !important; border-radius: 999px !important; font-weight: 600; font-size: 11.5px; } .token-dot { width: 8px !important; height: 8px !important; } .btn-theme-toggle { width: 36px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .25s var(--ease-spring), color .15s, border-color .15s; } .btn-theme-toggle:hover { color: var(--accent-2); border-color: var(--accent-2); } /* ════ Stats bar — slim, premium row ════ */ .stats-bar { height: 36px !important; padding: 0 16px !important; gap: 2px !important; background: var(--surface); border-bottom: 1px solid var(--border); } .stat-item { padding: 0 12px !important; border-radius: 3px; background: transparent; border: none !important; height: 28px !important; gap: 6px !important; transition: background .15s var(--ease-out), color .15s var(--ease-out); position: relative; } .stat-item:hover { background: color-mix(in srgb, var(--accent-1) 8%, transparent); } .stat-item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--border-2); display: block !important; } .stat-item:first-child::before { display: none !important; } .stat-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 11px !important; flex-shrink: 0; } .stat-val { font-size: 12px !important; font-weight: 600 !important; letter-spacing: -.01em; } .stat-key { font-size: 11px !important; font-weight: 500; color: var(--text-2); } /* ════ Page hero pattern ════ */ .page-hero { padding: 26px 24px 22px; position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: var(--accent-grad); opacity: .04; pointer-events: none; z-index: 0; } .page-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .page-hero-title { font-family: var(--font-sans); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -.025em; color: var(--text); margin: 0; display: flex; align-items: center; gap: 12px; } .page-hero-title-accent { display: inline-block; width: 4px; height: 30px; border-radius: 2px; background: var(--accent-grad); } .page-hero-sub { font-size: 13.5px; color: var(--text-2); margin-top: 6px; font-weight: 500; letter-spacing: .01em; } /* ════ Page content padding — content-first ════ */ .page-content { padding: 20px 24px 24px !important; } /* ════ Buttons — pill, on-brand ════ */ .btn-ghost:hover { background: color-mix(in srgb, var(--accent-1) 8%, var(--card)) !important; border-color: color-mix(in srgb, var(--accent-1) 40%, var(--border)) !important; color: var(--text) !important; } /* ════ Filter bar — soft, borderless-leaning ════ */ .filter-bar { padding: 10px 14px !important; border-radius: var(--radius-lg) !important; background: var(--card) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm); gap: 8px !important; } .filter-input { height: 30px !important; font-size: 12px !important; border-radius: var(--radius-pill) !important; background: var(--surface); } .filter-select { height: 30px !important; font-size: 12px !important; border-radius: var(--radius) !important; background: var(--surface); } /* ════ Team pill revolution ════ */ .team-pill { height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; background: var(--card) !important; } /* ════ Cards (global) revolution ════ */ .card { border-radius: 14px !important; border: 1px solid var(--border-2) !important; background: color-mix(in srgb, var(--card) 96%, transparent) !important; box-shadow: var(--shadow-sm); } .card:hover { box-shadow: var(--shadow-md); } .card-header { padding: 12px 16px !important; border-bottom: 1px solid var(--border-2); } .card-title { font-family: var(--font-sans) !important; font-weight: 600 !important; letter-spacing: -.01em; font-size: 12px; } /* ════ Table revolution ════ */ .groups-wrap { border-radius: var(--radius-lg) !important; border-color: var(--glass-border) !important; box-shadow: var(--shadow-md); } .groups-table thead th { padding: 6px 8px !important; font-size: 10.5px !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--text-3) !important; font-weight: 700 !important; background: var(--surface); } .groups-table tbody tr:hover { background: color-mix(in srgb, var(--link) 6%, var(--surface)) !important; box-shadow: inset 2px 0 0 var(--link); } /* ════ PC Health — compact, content-first ════ */ .pch-topbar { padding: 8px 22px 0 !important; background: linear-gradient(180deg, color-mix(in srgb, var(--elevated) 92%, transparent), color-mix(in srgb, var(--elevated) 82%, var(--bg))) !important; border-bottom: 1px solid var(--border-2) !important; } .pch-topbar-row { gap: 10px !important; margin-bottom: 6px !important; } .pch-title { font-family: var(--font-sans) !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: -.015em; color: var(--text); position: relative; padding-left: 11px; margin-right: 4px !important; } .pch-title::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--accent-grad); } .pch-infobar { padding: 5px 12px !important; font-size: 11.5px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--surface) 96%, transparent) !important; border: 1px solid var(--border-2) !important; box-shadow: var(--shadow-sm); gap: 7px !important; } .pch-infobar-val { font-size: 12.5px !important; font-weight: 800 !important; } .pch-infobar-lbl { font-size: 10.5px !important; font-weight: 500; } /* Tabs — compact, refined active state */ .pch-tabs-row { gap: 2px !important; border-bottom: 1px solid var(--border-2) !important; padding-bottom: 0; } .pch-tab { padding: 6px 12px !important; font-size: 12px !important; font-weight: 600 !important; border-radius: 8px 8px 0 0 !important; border-bottom: none !important; color: var(--text-3); position: relative; letter-spacing: .1px; } .pch-tab::after { display: none !important; } .pch-tab:hover { color: var(--text); background: color-mix(in srgb, var(--accent-1) 8%, transparent); } .pch-tab.active { color: var(--accent-1) !important; background: transparent !important; font-weight: 700 !important; } .pch-tab.active::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent-grad); border-radius: 2px; } /* PC monitor card — refined screen with teal accent strip */ .pch-grid { padding: 14px 22px !important; gap: 14px !important; } .pch-mon { padding: 5px !important; border-radius: 12px 12px 8px 8px !important; border: 1.5px solid var(--pc-rim) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--pc-bezel) 94%, transparent), var(--pc-bezel)) !important; position: relative; overflow: hidden !important; transition: transform .22s var(--ease-spring), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out) !important; } .pch-mon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-grad); opacity: .65; z-index: 3; } .pch-mon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 200% 60% at 50% -20%, rgba(255,255,255,.04), transparent 60%); z-index: 1; } [data-theme="light"] .pch-mon::after { background: radial-gradient(ellipse 200% 60% at 50% -20%, rgba(255,255,255,.5), transparent 60%); } .pch-mon:hover { transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--accent-1) 50%, var(--pc-rim)) !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-1) 22%, transparent), 0 2px 6px rgba(0,0,0,.20) !important; } .pch-screen { border-radius: 9px !important; padding: 11px 12px !important; background: var(--pc-screen); position: relative; z-index: 2; } .pch-mon-hdr-center { font-size: 17px !important; letter-spacing: .6px !important; font-weight: 900 !important; } .pch-mon-hdr-lbl { font-size: 8px !important; letter-spacing: .8px !important; } .pch-mon-hdr-val { font-size: 10.5px !important; } /* Check These — premium amber treatment */ #pch-attention-bar { border-radius: 16px !important; border: 1px solid rgba(249,115,22,.35) !important; background: linear-gradient(135deg, rgba(249,115,22,.10), rgba(239,68,68,.05) 70%), var(--card) !important; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(249,115,22,.08); } .pch-attn-header { padding: 12px 18px !important; } .pch-attn-title { font-size: 14px !important; letter-spacing: .02em !important; } /* Attention bar PC cards */ .pch-attn-card { border-radius: 14px !important; border: 1.5px solid rgba(249,115,22,.28) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 95%, transparent), var(--card)) !important; } .pch-attn-pc { font-size: 17px !important; letter-spacing: -.025em !important; } /* Slider — compact teal */ .pch-slider { width: 200px !important; height: 4px; } .pch-slider::-webkit-slider-thumb { width: 13px !important; height: 13px !important; background: var(--accent-1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent) !important; border: 2px solid var(--bg) !important; } .pch-sort-btn { height: 27px; font-size: 11px !important; padding: 4px 10px !important; border-radius: 7px !important; background: var(--card) !important; color: var(--text-2) !important; } .pch-sort-btn:hover { background: var(--accent-1) !important; border-color: var(--accent-1) !important; color: #fff !important; } .pch-btn-fetch { padding: 5px 14px !important; border-radius: 8px !important; background: var(--accent-grad) !important; border: 1px solid color-mix(in srgb, var(--accent-1) 60%, transparent) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .3px !important; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-1) 28%, transparent) !important; } .pch-btn-fetch:hover { filter: brightness(1.08); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-1) 38%, transparent) !important; transform: translateY(-1px); } .pch-view-btn { width: 28px; height: 28px; border-radius: 7px !important; } /* Modal — premium */ .pch-modal { border-radius: 18px !important; border: 1px solid var(--border-2) !important; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.02) inset !important; } .pch-modal-hd { background: linear-gradient(180deg, var(--elevated), color-mix(in srgb, var(--elevated) 92%, var(--bg))) !important; border-radius: 18px 18px 0 0 !important; } .pch-modal-accent { height: 4px !important; background: var(--accent-grad) !important; } .pch-modal-pc { font-size: 26px !important; letter-spacing: -.025em !important; } /* ════ Section spacing improvements ════ */ .pch-body { padding-top: 4px; } #panel-analysis { padding: 18px 24px !important; } #panel-processes { padding: 18px 24px !important; } /* ════ Subtle texture on the page-content area ════ */ main { position: relative; min-height: calc(100vh - 54px); } /* ════ Card title icons (used in PC Health analysis tab) ════ */ .ana-stat-tile { border-radius: 14px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card) 80%, var(--bg))) !important; border: 1px solid var(--border-2) !important; transition: border-color .18s, transform .15s, box-shadow .18s; padding: 14px 16px !important; } .ana-stat-tile:hover { border-color: color-mix(in srgb, var(--accent-1) 40%, var(--border)); transform: translateY(-2px); box-shadow: var(--shadow-md); } .ana-stat-num { font-family: var(--font-sans) !important; font-weight: 800 !important; letter-spacing: -.025em !important; } .ana-hero-num { font-family: var(--font-sans) !important; font-weight: 800 !important; letter-spacing: -.03em !important; } /* Make headers under accent color pop */ .ana-stat-lbl { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase; color: var(--text-3) !important; } /* ════ Page-level loading + empty refinements ════ */ .pch-grid-empty { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 80%, var(--bg))); border: 1px dashed var(--border); border-radius: 14px; padding: 80px 20px !important; font-size: 13px; } /* ════ Flash / banner messages ════ */ .page-content > div[style*="background:var(--green-dim)"], .page-content > div[style*="background:var(--red-dim)"], .page-content > div[style*="background:var(--blue-dim)"], .page-content > div[style*="background:var(--yellow-dim)"] { border-radius: 12px !important; padding: 12px 16px !important; font-size: 13.5px !important; font-weight: 500; box-shadow: var(--shadow-sm); } /* ════ Improve scrollbars again with the accent ════ */ ::-webkit-scrollbar-thumb:hover { background-color: var(--accent-1); } /* ═══════════════════════════════════════════════════════════ DESIGNED LOADING STATES & MICROANIMATIONS ═══════════════════════════════════════════════════════════ */ /* Shimmer keyframes used by skeleton placeholders */ @keyframes robo-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton-block { background: linear-gradient( 90deg, color-mix(in srgb, var(--card) 100%, transparent) 0%, color-mix(in srgb, var(--card) 70%, var(--card-hover)) 50%, color-mix(in srgb, var(--card) 100%, transparent) 100% ); background-size: 800px 100%; animation: robo-shimmer 1.8s linear infinite; border-radius: 8px; } /* PC Health grid skeleton — when loading replace plain text */ .pch-grid-empty { background: transparent !important; border: none !important; padding: 28px 20px !important; position: relative; } /* Replace the boring "Loading..." with a designed pulse strip */ .pch-grid-empty::after { content: ""; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent-1), transparent); animation: robo-loading 1.4s ease-in-out infinite; } @keyframes robo-loading { 0%, 100% { transform: translateX(-50%) scaleX(.4); opacity: .4; } 50% { transform: translateX(-50%) scaleX(1.0); opacity: 1; } } /* Page entrance — soft fade & rise */ /* page-enter on main is REMOVED — a transform on
breaks position:fixed modals (CSS spec: fixed elements are positioned relative to the nearest transformed ancestor). Instead, animate .page-content which sits inside main and does NOT contain any modals. */ .page-content { animation: page-enter .35s var(--ease-out) both; } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Live dot — for "Updated X ago" lines, etc. */ .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-3) 60%, transparent); animation: live-ping 1.8s ease-out infinite; vertical-align: middle; margin-right: 6px; } @keyframes live-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-3) 55%, transparent); } 80% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ── Status Right Sidebar ──────────────────────────────────────────── */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1050; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: fadeInBd .2s ease; } @keyframes fadeInBd { from { opacity: 0; } to { opacity: 1; } } .sidebar-panel { position: absolute; top: 0; right: 0; height: 100%; width: 420px; max-width: 100vw; background: var(--card); border-left: 1px solid var(--border); display: flex; flex-direction: column; animation: slideInFromRight .22s cubic-bezier(.2,.8,.2,1); box-shadow: -8px 0 32px rgba(0,0,0,.5); overflow: hidden; } .sidebar-panel.triage-panel--wide { width: 400px; } @media (max-width: 700px) { .sidebar-panel.triage-panel--wide { width: 100vw; max-width: 100vw; } } @keyframes slideInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slideOutToRight { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes fadeOutBd { from { opacity: 1; } to { opacity: 0; } } .sidebar-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); } .sidebar-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .sidebar-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .sidebar-subtitle { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-left: 1px; margin-top: 2px; } .sidebar-close { background: none; border: none; color: var(--text-3); font-size: 18px; cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); transition: color .15s, background .15s; line-height: 1; flex-shrink: 0; } .sidebar-close:hover { color: var(--text); background: var(--elevated); } .sidebar-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .sidebar-section { padding: 16px 20px; border-bottom: 1px solid var(--border); } .sidebar-section:last-child { border-bottom: none; } .sidebar-section-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 6px; } .sidebar-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; background: var(--surface); flex-shrink: 0; } /* Better table styling */ .groups-table { border-collapse: collapse; width: 100%; border-spacing: 0; } .groups-table tbody tr { transition: background .1s; } .groups-table tbody tr:hover { background: var(--card-hover); } /* ── Premium dark mode table polish ──────────────────────── */ .groups-table thead th { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; white-space: nowrap; } .groups-table tbody td { border-bottom: 1px solid var(--border-2); vertical-align: middle; } .groups-table tbody tr:last-child td { border-bottom: none; } /* Frequency badge glow for high-count groups */ .freq-badge-high { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid rgba(248,113,113,.25); border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; } /* Better modal backdrop */ .modal-backdrop-custom { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Filter bar improvements */ .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* Better scrollbar in sidebar */ .sidebar-body::-webkit-scrollbar { width: 4px; } .sidebar-body::-webkit-scrollbar-track { background: transparent; } .sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* "Last updated" label refined */ .pch-last-lbl { font-size: 11px !important; color: var(--text-3) !important; display: inline-flex; align-items: center; gap: 5px; } .pch-last-lbl::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 0 var(--accent-2); animation: live-ping 2.4s ease-out infinite; } /* ── Generic text color refinements ── */ hr { border: none; border-top: 1px solid var(--border-2); } /* Strong selection feel on text inputs in light mode */ [data-theme="light"] .filter-input, [data-theme="light"] .filter-select, [data-theme="light"] .modal-input { background: var(--surface); } /* Slight warm tint on light mode cards */ [data-theme="light"] .card, [data-theme="light"] .groups-wrap, [data-theme="light"] .filter-bar { background: var(--card) !important; box-shadow: 0 1px 3px rgba(30,25,15,.06); } /* Update PC variables for warm light surfaces */ [data-theme="light"] { --pc-bezel: #2a3038; --pc-rim: #3a414b; --pc-screen: #f6f4ee; --pc-text: #1a1f24; --pc-dim: #6d7681; --pc-sub: #6d7681; --pc-stand: #565d68; } /* ══════════════════════════════════════════════════════════ LIGHT MODE — warm, low-glare surfaces ══════════════════════════════════════════════════════════ */ /* ── Navbar ── */ [data-theme="light"] .nav-link.active { color: var(--accent-1) !important; background: color-mix(in srgb, var(--accent-1) 10%, transparent) !important; } [data-theme="light"] .nav-link.active i { color: var(--accent-1); } [data-theme="light"] .nav-title { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; } /* ── Stats bar ── */ [data-theme="light"] .stat-bar { background: var(--surface); border-bottom: 1px solid var(--border); } [data-theme="light"] .stat-item { border-right-color: var(--border-2) !important; } [data-theme="light"] .stat-item:hover { background: var(--card-hover); } [data-theme="light"] .stat-icon { background: color-mix(in srgb, currentColor 10%, transparent); } /* ── Filter / search bar ── */ [data-theme="light"] .filter-bar { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: none; } [data-theme="light"] .filter-input, [data-theme="light"] .filter-select { background: var(--card) !important; border-color: var(--border) !important; color: var(--text); } [data-theme="light"] .filter-input:focus, [data-theme="light"] .filter-select:focus { border-color: var(--accent-1) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-1) 14%, transparent) !important; } /* ── Team pills ── */ [data-theme="light"] .team-pill { background: var(--elevated) !important; border-color: var(--border) !important; color: var(--text-2) !important; } [data-theme="light"] .team-pill:hover { background: var(--card-hover) !important; } [data-theme="light"] .team-pill.active { background: var(--accent-1) !important; border-color: var(--accent-1) !important; color: #fff !important; box-shadow: none !important; } [data-theme="light"] .team-pill-all.active { background: var(--text-2) !important; border-color: var(--text-2) !important; color: #fff !important; } /* ── Error table ── */ [data-theme="light"] .groups-table thead tr { background: var(--elevated) !important; border-bottom: 2px solid var(--border) !important; } [data-theme="light"] .groups-table thead th { color: var(--text) !important; font-weight: 700; } [data-theme="light"] .groups-table tbody tr:hover { background: var(--card-hover) !important; box-shadow: inset 3px 0 0 var(--accent-1); } /* ── Primary / secondary buttons ── */ [data-theme="light"] .btn-primary { background: var(--accent-1) !important; color: #fff !important; box-shadow: none !important; } [data-theme="light"] .btn-secondary, [data-theme="light"] .btn-outline { border-color: var(--border) !important; color: var(--text-2) !important; background: var(--elevated) !important; } [data-theme="light"] .btn-secondary:hover, [data-theme="light"] .btn-outline:hover { background: var(--card-hover) !important; } /* ── PC Health tabs ── */ [data-theme="light"] .pch-tab.active { color: var(--accent-1) !important; } [data-theme="light"] .pch-tab:hover { background: color-mix(in srgb, var(--accent-1) 8%, transparent); } [data-theme="light"] .pch-topbar { background: var(--surface); border-bottom-color: var(--border); } /* ── PC Health sort / action buttons ── */ [data-theme="light"] .pch-sort-btn { background: var(--elevated) !important; border-color: var(--border) !important; color: var(--text-2) !important; } [data-theme="light"] .pch-sort-btn:hover, [data-theme="light"] .pch-sort-btn.active { background: var(--accent-1) !important; border-color: var(--accent-1) !important; color: #fff !important; } /* ── Generic cards in light mode ── */ [data-theme="light"] .card { border-color: var(--border) !important; box-shadow: 0 1px 3px rgba(30,25,15,.06) !important; } [data-theme="light"] .card-title { color: var(--text) !important; } /* ── Links ── */ [data-theme="light"] a { color: var(--accent-1); } /* ── Selection ── */ [data-theme="light"] ::selection { background: var(--accent-1); color: #fff; } /* Token pill: amber when missing/invalid (warm) */ .dot-missing { background: var(--accent-3) !important; box-shadow: 0 0 6px var(--accent-3) !important; } /* Refined nav-divider */ .nav-divider { height: 22px !important; background: var(--border-2) !important; opacity: .6; } /* Brand voice: tighter heading rhythm everywhere */ h1, h2, h3, h4, .page-title, .pch-title, .card-title { font-family: var(--font-sans); letter-spacing: -.02em; } /* Subtle inset shadow on inputs for depth */ .filter-input, .filter-select, .modal-input, .pch-search-input { box-shadow: 0 1px 0 rgba(0,0,0,.04) inset; } /* Active filter selects highlight in brand */ .filter-select:focus { border-color: var(--accent-1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 18%, transparent) !important; } /* Reduce vertical breathing room on .pch-search-wrap inline */ .pch-search-wrap { height: 27px; border-radius: 7px !important; } .pch-search-input { font-size: 11.5px !important; } /* Time label nicer */ .pch-time-lbl { font-size: 11.5px !important; padding: 2px 8px !important; border-radius: 6px !important; } /* ══════════════════════════════════════════════════════════════ GLOBAL CYAN ACCENT SYSTEM — DARK + LIGHT, ALL PAGES ══════════════════════════════════════════════════════════════ */ /* ── DARK MODE: filter bar gets a teal left accent + subtle border ── */ .filter-bar { border-color: rgba(8,145,178,.22) !important; border-left: 3px solid var(--accent-1) !important; } .filter-input, .filter-select { border-color: rgba(8,145,178,.18) !important; background: var(--elevated) !important; transition: border-color .18s, box-shadow .18s; } .filter-input:focus, .filter-select:focus { border-color: var(--accent-1) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 16%, transparent) !important; outline: none !important; } .filter-input::placeholder { color: var(--text-3); opacity: .8; } /* ── DARK MODE: table header — Jira flat style ── */ .groups-table thead tr { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } .groups-table thead th { color: var(--text-3) !important; } /* ── DARK MODE: table row hover — link blue inset edge ── */ .groups-table tbody tr { transition: background .12s, box-shadow .12s; } .groups-table tbody tr:hover { background: color-mix(in srgb, var(--link) 6%, var(--surface)) !important; box-shadow: inset 2px 0 0 var(--link) !important; } /* ── DARK MODE: stats bar — flat Jira surface ── */ .stats-bar { border-bottom-color: var(--border) !important; background: var(--surface) !important; } .stat-item:hover { background: color-mix(in srgb, var(--link) 6%, transparent) !important; } /* ── DARK MODE: cards — flat, no accent line ── */ .card { border-top: 1px solid var(--border); } .card:hover { border-color: var(--border) !important; box-shadow: none !important; } /* ── DARK MODE: section/page titles ── */ .page-hero h1, .page-title { color: var(--text); background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--text); background-clip: unset; } /* ── DARK MODE: archive table same as dashboard ── */ .archive-table thead tr, .jira-table thead tr { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } .archive-table thead th, .jira-table thead th { color: var(--text-3) !important; } .archive-table tbody tr:hover, .jira-table tbody tr:hover { background: color-mix(in srgb, var(--link) 6%, var(--surface)) !important; box-shadow: inset 2px 0 0 var(--link) !important; } /* ── DARK MODE: modal + generic panel border accent ── */ .modal-box, .panel, .summary-card { border-top: 1px solid var(--border); } /* ── DARK MODE: pagination / page-number buttons ── */ .pagination .page-btn.active { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; } .pagination .page-btn:hover { border-color: var(--link) !important; color: var(--link) !important; } /* ── DARK MODE: tag / badge accent ── */ .tag-badge, .pc-tag, .process-tag { border-color: rgba(8,145,178,.25) !important; color: var(--accent-2) !important; } /* ── GROUP DETAIL: process + error styling ── */ .group-process-name { color: var(--accent-2) !important; font-weight: 600; } [data-theme="light"] .tag-badge, [data-theme="light"] .pc-tag, [data-theme="light"] .process-tag { color: #1e40af !important; } [data-theme="light"] .group-process-name { color: var(--text) !important; font-weight: 600; } .error-sample-row:hover { box-shadow: inset 3px 0 0 var(--accent-1); } /* ══ LIGHT MODE — reinforce warm surfaces ══ */ [data-theme="light"] .filter-bar { background: var(--surface) !important; border-color: var(--border) !important; border-left: 3px solid var(--accent-1) !important; box-shadow: none !important; } [data-theme="light"] .filter-input, [data-theme="light"] .filter-select { background: var(--card) !important; border-color: var(--border) !important; } [data-theme="light"] .stats-bar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="light"] .groups-table thead tr, [data-theme="light"] .archive-table thead tr, [data-theme="light"] .jira-table thead tr { background: var(--elevated) !important; border-bottom: 2px solid var(--border) !important; } [data-theme="light"] .groups-table thead th, [data-theme="light"] .archive-table thead th, [data-theme="light"] .jira-table thead th { color: var(--text) !important; font-weight: 700 !important; } [data-theme="light"] .card { background: var(--card) !important; border-color: var(--border) !important; } [data-theme="light"] .modal-box { background: var(--card) !important; border-top: 2px solid var(--accent-1) !important; } [data-theme="light"] .jira-table tbody tr:hover { background: var(--card-hover) !important; box-shadow: inset 3px 0 0 var(--accent-1) !important; } [data-theme="light"] .config-section, [data-theme="light"] .config-card { background: var(--card) !important; border-color: var(--border) !important; } /* Buttons in both modes: keep outline variant cyan */ .btn-ghost:hover { border-color: var(--accent-1) !important; color: var(--accent-1) !important; background: color-mix(in srgb, var(--accent-1) 8%, transparent) !important; } /* Process name chips in dashboard table */ .proc-chip, .process-name-chip { background: color-mix(in srgb, var(--accent-1) 8%, var(--elevated)) !important; border-color: rgba(8,145,178,.22) !important; color: var(--accent-2) !important; } [data-theme="light"] .proc-chip, [data-theme="light"] .process-name-chip { background: var(--elevated) !important; border-color: var(--border) !important; color: var(--text-2) !important; } [data-theme="light"] .freq-badge { background: var(--elevated) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ── R-Visa blocker rows: left accent line only ── */ .groups-table tbody tr.row-blocker { box-shadow: inset 3px 0 0 0 #f59e0b !important; } .groups-table tbody tr.row-blocker:hover { box-shadow: inset 3px 0 0 0 #f59e0b !important; } [data-theme="light"] .groups-table tbody tr.row-blocker { box-shadow: inset 3px 0 0 0 #d97706 !important; } [data-theme="light"] .groups-table tbody tr.row-blocker:hover { box-shadow: inset 3px 0 0 0 #d97706 !important; } /* Light mode: ensure table text is readable */ [data-theme="light"] .process-name-text { color: var(--text); font-weight: 600; } [data-theme="light"] .error-msg, [data-theme="light"] .src-act-text, [data-theme="light"] .rpa-log-text { color: #626F86; } [data-theme="light"] .groups-table thead th { color: var(--text) !important; } [data-theme="light"] .app-nav { background: var(--surface); box-shadow: 0 1px 0 var(--border); } [data-theme="light"] .stat-val { color: var(--text); } [data-theme="light"] .stat-key { color: var(--text-2); } [data-theme="light"] .freq-val.freq-low { color: #1d4ed8; } [data-theme="light"] .ql-toolbar.ql-snow, [data-theme="light"] .ql-container.ql-snow { background: var(--card); border-color: var(--border); } /* ── Jira design polish (global) ─────────────────────────── */ .modal-box, .modal-header, .modal-body, .modal-footer, .token-pill, .chip, .stat-card, .kpi-strip, .page-head-title { font-family: var(--font-sans); } .process-name, .process-name-text { font-family: var(--font-sans); font-size: var(--font-body-size); font-weight: var(--font-weight-body, 500); color: var(--text); } .modal-title { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .modal-box { border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.32); } .token-pill { border-radius: 3px; font-size: 12px; font-weight: 500; } .chip { border-radius: 3px; font-size: 12px; font-weight: 500; } .stat-val { font-weight: 600; letter-spacing: -0.01em; } [data-theme="light"] .groups-table tbody tr { background: var(--surface); } /* ── Global interaction polish ─────────────────────────────── */ :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .btn:focus-visible, .btn-icon:focus-visible, .filter-input:focus-visible, .filter-select:focus-visible, .modal-input:focus-visible, .nav-link:focus-visible, .token-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-3) 35%, transparent); border-radius: 4px; transition: background .15s var(--ease-out, ease); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-3) 55%, transparent); } .panel-header, .errors-section-header { transition: background .12s var(--ease-out, ease); } .chip, .proc-chip, .process-name-chip { transition: background .12s var(--ease-out, ease), border-color .12s var(--ease-out, ease), color .12s var(--ease-out, ease); } .chip:hover, .proc-chip:hover { filter: brightness(1.06); } .archive-item { transition: background .12s var(--ease-out, ease), border-color .12s var(--ease-out, ease), box-shadow .12s var(--ease-out, ease); } .archive-item:hover { background: var(--card-hover); border-color: color-mix(in srgb, var(--link) 22%, var(--border)); } .error-screenshot { transition: background .15s var(--ease-out, ease), border-color .15s var(--ease-out, ease), box-shadow .15s var(--ease-out, ease); } .error-screenshot:hover { background: var(--blue-hover); border-color: color-mix(in srgb, var(--link) 45%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--link) 20%, transparent); } .stacktrace-box, .rpa-log-box { transition: max-height .25s ease, border-color .15s var(--ease-out, ease), color .15s var(--ease-out, ease); } .stacktrace-box:hover, .rpa-log-box:hover { border-color: color-mix(in srgb, var(--link) 30%, var(--border)); color: var(--text); } .ln-jira-row { transition: border-color .12s var(--ease-out, ease), background .12s var(--ease-out, ease); } .ln-jira-row:hover { border-color: color-mix(in srgb, var(--link) 25%, var(--border-2)); background: color-mix(in srgb, var(--link) 4%, var(--card)); } .jira-compact-row { transition: background .12s var(--ease-out, ease); } .jira-compact-row:hover { background: color-mix(in srgb, var(--link) 4%, transparent); } .arc-row:hover .process-name { color: var(--blue); text-shadow: 0 0 20px color-mix(in srgb, var(--link) 25%, transparent); } .groups-table thead th.sortable, .groups-table thead th[data-sort] { transition: color .12s var(--ease-out, ease), background .12s var(--ease-out, ease); } .groups-table thead th.sortable:hover, .groups-table thead th[data-sort]:hover { color: var(--text); background: color-mix(in srgb, var(--link) 6%, transparent); } /* ══════════════════════════════════════════════════════════ Triage sidebar + AI pills + Group detail polish ══════════════════════════════════════════════════════════ */ .triage-panel { font-size: 13px; line-height: 1.45; } /* Header */ .triage-header { padding: 18px 20px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 6%, var(--surface)), var(--surface)); flex-shrink: 0; } .triage-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .triage-header-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; } .triage-header-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-2); line-height: 1.4; white-space: normal; overflow: visible; text-overflow: unset; } .triage-header-close { background: none; border: none; color: var(--text-3); font-size: 14px; cursor: pointer; padding: 6px; border-radius: 6px; line-height: 1; transition: color .12s, background .12s; } .triage-header-close:hover { color: var(--text); background: var(--elevated); } .triage-status-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; } .triage-pill--assigned { background: var(--violet-dim); color: var(--violet); border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); } .triage-pill--linked { background: var(--blue-dim); color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); } .triage-hint--assign { margin-top: 10px; } .triage-pill--todo { background: var(--elevated); color: var(--text-3); border: 1px solid var(--border); } .triage-body { padding: 0; gap: 0; } .triage-section { padding: 18px 20px; border-bottom: 1px solid var(--border); } .triage-section--ai { background: color-mix(in srgb, var(--elevated) 40%, transparent); } .triage-section-title { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; } /* Action tabs */ .triage-action-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 8px; background: var(--surface); border-radius: var(--radius-pill); padding: 3px; } .triage-action-tab { padding: 8px 10px; border: none; background: transparent; border-radius: var(--radius-pill); color: var(--text-3); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: background .12s, color .12s; } .triage-action-tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); } .triage-action-tab[data-triage-tab="assign"].active { color: var(--violet); } .triage-action-tab[data-triage-tab="jira"].active { color: var(--blue); } /* AI suggests a tab — a small gold dot nudges toward it without hiding the tab's own active-state color, so the picker still looks like one control. */ .triage-action-tab.ai-suggested:not(.active) { background: var(--violet-dim); color: var(--violet); } .triage-action-tab.ai-suggested::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); flex-shrink: 0; } /* Compact AI status row — one line above the always-visible picker */ .triage-section--ai-brief { padding: 14px 20px 10px; } .triage-ai-brief-row { display: flex; align-items: center; gap: 8px; min-height: 26px; } .triage-ai-brief-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 500; } .triage-ai-brief-lbl i { color: var(--violet); } /* Floating AI reasoning bubble — sits in the dimmed backdrop beside the panel, comic-book-callout style, instead of eating room inside the popup. */ .triage-ai-bubble { position: absolute; top: 90px; right: 416px; width: 300px; max-width: calc(100vw - 440px); max-height: calc(100vh - 130px); overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 14px 16px; z-index: 1051; animation: aiBubbleIn .22s cubic-bezier(.2,.8,.2,1); } .triage-ai-bubble::after { content: ''; position: absolute; top: 22px; right: -8px; width: 16px; height: 16px; background: var(--card); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(-45deg); } /* Jira description panel — full-height, left-anchored (not centered, not a small bubble) so it can hold the full editable description + screenshot, same as the old standalone modal, just living in the backdrop instead. */ .triage-desc-panel { position: fixed; top: 16px; left: 16px; bottom: 16px; width: min(720px, calc(100vw - 800px)); min-width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; z-index: 1051; animation: descPanelIn .22s cubic-bezier(.2,.8,.2,1); } @keyframes descPanelIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 1340px) { .triage-desc-panel { display: none !important; } } .triage-desc-panel-hd { flex-shrink: 0; padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--surface); } .triage-desc-panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .triage-desc-field--grow { flex: 1; display: flex; flex-direction: column; min-height: 0; } .triage-desc-field-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .triage-desc-title-row { display: flex; gap: 6px; align-items: center; } .triage-desc-title-row .triage-input { flex: 1; font-weight: 600; } .triage-desc-quill { flex: 1; min-height: 240px; display: flex; flex-direction: column; } .triage-desc-quill .ql-container { flex: 1; overflow-y: auto; } .triage-desc-shot-wrap { flex-shrink: 0; } .triage-desc-screenshot { display: block; max-width: 100%; max-height: 220px; margin: 0 auto; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: zoom-in; } .triage-ai-bubble-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--violet); text-transform: uppercase; letter-spacing: .05em; } .triage-ai-bubble-body { font-size: 12.5px; line-height: 1.55; color: var(--text-2); } .triage-ai-bubble-body p { margin: 0 0 8px; } .triage-ai-bubble-body p:last-child { margin-bottom: 0; } .triage-ai-bubble-body ol, .triage-ai-bubble-body ul { margin: 6px 0; padding-left: 16px; } @keyframes aiBubbleIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 1000px) { .triage-ai-bubble { display: none !important; } } /* Form controls */ .triage-field-label { display: block; font-size: 11px; font-weight: 600; color: var(--text-3); margin-bottom: 5px; } .triage-optional { font-weight: 400; opacity: .7; } .triage-input, .triage-textarea { width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; padding: 8px 10px; font-family: inherit; transition: border-color .12s; } .triage-input:focus, .triage-textarea:focus { outline: none; border-color: var(--blue); } .triage-textarea { resize: vertical; min-height: 44px; line-height: 1.45; } .triage-hint { font-size: 11px; color: var(--text-3); margin: 6px 0 0; line-height: 1.4; display: flex; align-items: center; gap: 5px; } .triage-hint-warn { color: var(--yellow); } /* Assign card */ .triage-assign-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); } .triage-assign-preview { padding: 10px 12px; } .triage-assign-message-wrap { padding: 8px 10px; border-top: 1px solid var(--border); background: var(--elevated); } .triage-pair-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .triage-pair-names { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .triage-unassign-btn { flex-shrink: 0; background: none; border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); cursor: pointer; } .triage-unassign-btn:hover { background: var(--red-dim); } /* Jira sub-mode */ .triage-jira-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; } .triage-jira-mode-btn { padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--elevated); color: var(--text-3); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .12s; } .triage-jira-mode-btn.active { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); } .triage-jira-url-row { display: flex; gap: 6px; align-items: center; } .triage-open-link { flex-shrink: 0; color: var(--blue); padding: 8px; border-radius: var(--radius-sm); background: var(--elevated); border: 1px solid var(--border); line-height: 1; } .triage-jira-links { max-height: 100px; overflow-y: auto; margin-bottom: 10px; } .triage-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .triage-form-full { grid-column: 1 / -1; } .triage-inline-error { color: var(--red); font-size: 12px; background: var(--red-dim); border-radius: var(--radius-sm); padding: 8px 10px; margin-top: 8px; } /* Footer */ .triage-footer { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; } .triage-footer-close { margin-right: auto; background: none; border: none; color: var(--text-3); font-size: 12px; font-weight: 500; cursor: pointer; padding: 8px 4px; } .triage-footer-close:hover { color: var(--text); } /* AI section */ .triage-ai-age { font-size: 11px; color: var(--text-3); } .triage-text-btn { background: none; border: none; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; margin-left: 4px; } .triage-text-btn--muted { background: none; border: none; color: var(--text-3); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 7px 4px; margin-left: 2px; align-self: center; } .triage-text-btn--muted:hover { color: var(--text-2); } .triage-ai-run-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; } .triage-ai-run-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(91,156,246,.05); } .triage-ai-spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: triageSpin .7s linear infinite; } @keyframes triageSpin { to { transform: rotate(360deg); } } /* AI verdict pills (shared sidebar + group detail) */ .ai-verdict-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .ai-verdict-pill--jira { background: #85b8ff; color: #09326c; } .ai-verdict-pill--assign { background: #f797d2; color: #50253f; text-transform: none; font-weight: 600; } .ai-verdict-pill--resolve { background: #b3df72; color: #1c3329; text-transform: none; font-weight: 600; } .ai-verdict-pill--monitor { background: #dfe1e6; color: #44546f; text-transform: none; font-weight: 600; } .ai-verdict-pill--escalate { background: #fd9891; color: #5d1f1a; text-transform: none; font-weight: 600; } .ai-conf-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--elevated); color: var(--text-2); border: 1px solid var(--border); } .ai-xaml-tag { display: inline-flex; padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: rgba(168,85,247,.12); color: #c4b5fd; } .ai-screenshot-tag { display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: rgba(59,130,246,.12); color: #93c5fd; } .triage-ai-action-btns { display: flex; gap: 6px; flex-wrap: wrap; } .triage-ai-override { margin-top: 8px; } .triage-ai-override-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .triage-chip-btn { padding: 6px 11px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background .12s, border-color .12s, color .12s; } .triage-chip-btn:hover { border-color: var(--text-3); color: var(--text); } .triage-chip-btn--muted { color: var(--text-3); } .triage-chip-btn--jira { background: var(--blue-dim); border-color: color-mix(in srgb, var(--blue) 30%, transparent); color: var(--blue); } .triage-chip-btn--assign { background: var(--violet-dim); border-color: color-mix(in srgb, var(--violet) 30%, transparent); color: var(--violet); } .triage-chip-btn--resolve { background: var(--green-dim); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); } .triage-body { flex: 1; overflow-y: auto; } .triage-ai-applied { font-size: 11px; color: var(--text-3); padding: 6px 0; } .triage-ai-error { font-size: 12px; color: #f87171; padding: 8px 0; } /* Group detail header — one-liner */ .gd-header { padding: 10px 16px; } .gd-header--oneline { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .gd-header--oneline .gd-header-copy { display: flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; } .gd-header--oneline .detail-process { font-size: 15px; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-source-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gd-source-inline i { color: var(--blue); flex-shrink: 0; } /* Legacy fallback (kept for compatibility if other views still use these) */ .gd-header-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .gd-source-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin: 5px 0 8px; } .gd-source-line i { color: var(--blue); } .gd-stage-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--blue-dim); color: var(--blue); } .gd-meta { margin-top: 2px; } .chip-assign { background: var(--violet-dim); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 25%, transparent); } .chip-sync { background: var(--yellow-dim); color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 25%, transparent); } .gd-assign-note { margin-top: 10px; padding: 8px 12px; border-radius: 8px; max-width: 520px; font-size: 12px; color: var(--text-2); line-height: 1.45; background: var(--violet-dim); border: 1px solid color-mix(in srgb, var(--violet) 20%, transparent); } .gd-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: flex-start; } .btn-resolve { color: var(--violet) !important; border-color: color-mix(in srgb, var(--violet) 40%, transparent) !important; } .btn-resolve:hover { background: var(--violet-dim) !important; } /* Group detail AI tab */ .gd-ai-tab-panel .panel-body { padding: 18px 24px; } .gd-ai-panel { max-width: none; } .gd-ai-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 32px; align-items: start; } @media (max-width: 860px) { .gd-ai-grid { grid-template-columns: 1fr; } } .gd-ai-col-right { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--elevated); position: sticky; top: 12px; } .gd-ai-decision-card { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin: 4px 0 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-2); } .gd-ai-decision-card .gd-ai-label { margin: 0; } .gd-ai-verdict-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .gd-ai-meta { font-size: 11px; color: var(--text-3); margin: 0 0 16px; } .gd-ai-rerun { margin-left: auto; background: none; border: 1px solid var(--border); color: var(--text-3); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 12px; } .gd-ai-rerun:hover { color: var(--text); border-color: var(--text-3); } .gd-ai-block { margin-bottom: 16px; } .gd-ai-block--muted { opacity: .92; } .gd-ai-label { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; } .gd-ai-copy { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); } .gd-ai-steps { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-2); } .gd-ai-decision { font-size: 12px; padding: 8px 12px; border-radius: 6px; background: var(--elevated); color: var(--text-3); border: 1px solid var(--border); } .gd-ai-empty { text-align: center; padding: 28px 12px; color: var(--text-3); } .gd-ai-empty p { margin: 0 0 12px; font-size: 13px; } .gd-ai-loading, .gd-ai-error { font-size: 12px; margin-top: 10px; text-align: center; } .gd-ai-error { color: #f87171; } .gd-ai-decision-panel { padding-top: 14px; border-top: 1px solid var(--border-2); } .gd-ai-panel .triage-chip-btn { padding: 7px 13px; font-size: 12px; border-radius: var(--radius-sm); } /* Error snapshot — the facts, above the AI verdict */ .gd-ai-snapshot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; } .gd-ai-snapshot-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--elevated); } .gd-ai-snapshot-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); } .gd-ai-snapshot-val { font-size: 15px; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; } .gd-ai-snapshot-val--sm { font-size: 11px; font-family: inherit; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gd-ai-snapshot-msg { font-size: 12px; color: var(--text-2); line-height: 1.5; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-2); } .gd-ai-view-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: none; border: 1px solid var(--border); color: var(--text-2); font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s, color .12s; } .gd-ai-view-btn:hover { border-color: var(--violet); color: var(--violet); } /* Full prompt + decision modal — split layout (prompt left, decision right) */ .ai-prompt-modal-bg { display: none; position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,.68); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; } .ai-prompt-modal-bg.open { display: flex; } .ai-prompt-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: min(1400px, 97vw); height: min(90vh, 940px); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; } .ai-prompt-modal-hd { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--elevated); } .ai-prompt-modal-hd h3 { margin: 0; font-size: 13.5px; font-weight: 700; flex: 1; color: var(--text); } /* Deprecated tabs — hidden, kept in case old markup lingers */ .ai-prompt-tabs { display: none; } /* Body — two-column split */ .ai-prompt-modal-body { flex: 1; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); background: var(--bg); min-height: 0; } @media (max-width: 900px) { .ai-prompt-modal-body { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); overflow: auto; } } .ai-prompt-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--border); } .ai-prompt-pane:last-child { border-right: none; } @media (max-width: 900px) { .ai-prompt-pane { border-right: none; border-bottom: 1px solid var(--border); } } /* Toolbar above each pane (copy button, decision pills) */ .ai-prompt-toolbar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-2); flex-shrink: 0; background: var(--surface); } .ai-prompt-toolbar-lbl { font-size: 10.5px; color: var(--text-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text-2); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .12s, color .12s, background .12s; white-space: nowrap; } .ai-copy-btn:hover { border-color: var(--violet); color: var(--violet); } .ai-copy-btn.copied { border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,.08); } /* Split-button — main action + caret dropdown */ .ai-copy-menu-wrap { position: relative; margin-left: auto; display: inline-flex; } .ai-copy-menu-wrap .ai-copy-btn { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .ai-copy-caret { padding: 5px 7px; border-radius: 6px 6px 6px 6px; border: 1px solid var(--border); background: var(--card); color: var(--text-3); font-size: 11px; cursor: pointer; border-top-left-radius: 0; border-bottom-left-radius: 0; transition: border-color .12s, color .12s; } .ai-copy-caret:hover { border-color: var(--violet); color: var(--violet); } .ai-copy-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 200px; z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.35); padding: 4px; } .ai-copy-menu.open { display: block; } .ai-copy-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 6px; border: none; background: none; color: var(--text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .1s, color .1s; } .ai-copy-menu button:hover { background: var(--elevated); color: var(--text); } .ai-copy-menu button .bi { font-size: 12px; color: var(--text-3); } /* Code display — VS Code-inspired */ .ai-code-scroll { flex: 1; overflow: auto; padding: 12px 16px; min-height: 0; } .ai-code-block { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 11.5px; line-height: 1.6; color: #d4d4d4; background: #1e1e1e; border: 1px solid #2d2d2d; border-radius: 8px; padding: 14px 16px; margin: 0; white-space: pre; overflow-x: auto; tab-size: 2; } [data-theme="light"] .ai-code-block { background: #f8f8f8; border-color: #e5e5e5; color: #24292f; } .ai-code-block.wrap { white-space: pre-wrap; word-break: break-word; } /* Syntax coloring — dark defaults, light-mode overrides */ .ai-code-block .tok-key { color: #9cdcfe; } .ai-code-block .tok-str { color: #ce9178; } .ai-code-block .tok-num { color: #b5cea8; } .ai-code-block .tok-bool { color: #569cd6; font-weight: 600; } .ai-code-block .tok-null { color: #569cd6; } .ai-code-block .tok-punct { color: #d4d4d4; } .ai-code-block .tok-comment { color: #6a9955; font-style: italic; } .ai-code-block .tok-header { color: #c586c0; font-weight: 700; } .ai-code-block .tok-section { color: #4ec9b0; font-weight: 700; } .ai-code-block .tok-label { color: #9cdcfe; font-weight: 600; } [data-theme="light"] .ai-code-block .tok-key { color: #005cc5; } [data-theme="light"] .ai-code-block .tok-str { color: #a31515; } [data-theme="light"] .ai-code-block .tok-num { color: #098658; } [data-theme="light"] .ai-code-block .tok-bool { color: #0000ff; } [data-theme="light"] .ai-code-block .tok-null { color: #0000ff; } [data-theme="light"] .ai-code-block .tok-punct { color: #24292f; } [data-theme="light"] .ai-code-block .tok-comment { color: #008000; } [data-theme="light"] .ai-code-block .tok-header { color: #af00db; } [data-theme="light"] .ai-code-block .tok-section { color: #267f99; } [data-theme="light"] .ai-code-block .tok-label { color: #005cc5; } /* Decision pane — cards, compact for the split layout */ .ai-decision-pane { padding: 12px 16px; overflow: auto; flex: 1; min-height: 0; } .ai-decision-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: var(--elevated); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; } .ai-decision-header .gd-ai-label { margin: 0; } .ai-decision-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .ai-decision-card { background: var(--card); border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px; } .ai-decision-card-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px; } .ai-decision-card-val { font-size: 12.5px; color: var(--text); line-height: 1.5; } .ai-decision-card-val.mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; } .ai-decision-steps { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.55; color: var(--text-2); } .ai-decision-steps li + li { margin-top: 3px; } .ai-decision-empty { color: var(--text-3); font-style: italic; font-size: 12px; } .ai-decision-meta-row { display: flex; gap: 8px; } .ai-decision-meta-row .ai-decision-card { flex: 1; min-width: 0; } /* Shared match/mismatch tag + close button (also used on Insights raw-data table) */ .ai-modal-close { width: 32px; height: 32px; border-radius: 8px; background: var(--elevated); border: 1px solid var(--border); color: var(--text-3); font-size: 18px; cursor: pointer; line-height: 1; } .ai-modal-close:hover { color: #ef4444; border-color: rgba(239,68,68,.3); } .ai-match-tag { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 6px; display: inline-flex; white-space: nowrap; } .ai-match-tag--yes { background: rgba(34,197,94,.12); color: #4ade80; } .ai-match-tag--no { background: rgba(239,68,68,.12); color: #f87171; } .ai-match-tag--na { background: var(--surface); color: var(--text-3); } .ai-data-user { font-size: 10.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .detail-process { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } /* ========================================================= ROBO DESIGN SYSTEM v2 — shared components Cards, KPI tiles, gauges, buttons, alerts ========================================================= */ /* ── Glass card (canonical) ─────────────────────────────── */ .robo-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .robo-card:hover { box-shadow: var(--shadow-md); } .robo-card-hd { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-2); } .robo-card-title { font-size: 14px; font-weight: 700; letter-spacing: -.02em; margin: 0; } .robo-card-sub { font-size: 11px; color: var(--text-3); font-weight: 500; margin: 2px 0 0; } .robo-card-body { padding: var(--space-4); } /* ── KPI tile (canonical — replaces fragmented .ana-stat-tile) ── */ .robo-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--space-3); } .robo-kpi-tile { background: var(--elevated); border: 1px solid var(--border-2); border-radius: var(--radius); padding: var(--space-3); text-align: center; transition: border-color .15s, transform .12s; } .robo-kpi-tile:hover { border-color: color-mix(in srgb, var(--blue) 30%, var(--border)); transform: translateY(-1px); } .robo-kpi-val { font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .robo-kpi-val--blue { color: var(--blue); } .robo-kpi-val--green { color: var(--green); } .robo-kpi-val--yellow { color: var(--yellow); } .robo-kpi-val--red { color: var(--red); } .robo-kpi-val--violet { color: var(--violet); } .robo-kpi-lbl { font-size: 10px; font-weight: 600; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; } /* ── Gauge card (AI insights) ─────────────────────────── */ .robo-gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } @media (max-width: 900px) { .robo-gauge-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .robo-gauge-grid { grid-template-columns: 1fr; } } .robo-gauge-card { background: var(--elevated); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); text-align: center; position: relative; overflow: hidden; } .robo-gauge-card--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-grad-1) 12%, var(--elevated)), var(--elevated)); border-color: color-mix(in srgb, var(--accent-grad-1) 25%, var(--border)); } .robo-gauge-val { font-size: 24px; font-weight: 900; letter-spacing: -.03em; margin-top: -8px; } .robo-gauge-val.good { color: var(--green); } .robo-gauge-val.mid { color: var(--yellow); } .robo-gauge-val.low { color: var(--red); } .robo-gauge-val.muted { color: var(--text-3); font-size: 20px; } .robo-gauge-lbl { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 2px; } .robo-gauge-sub { font-size: 10px; color: var(--text-3); margin-top: 4px; } /* ── Alert banners ─────────────────────────────────────── */ .robo-alert { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: 13px; margin-bottom: var(--space-3); } .robo-alert--success { background: var(--green-dim); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); color: var(--green); } .robo-alert--danger { background: var(--red-dim); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); color: var(--red); } .robo-alert--warning { background: var(--yellow-dim); border: 1px solid color-mix(in srgb, var(--yellow) 30%, transparent); color: var(--yellow); } .robo-alert--info { background: var(--blue-dim); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); color: var(--blue); } /* ── Token pill (navbar) ────────────────────────────────── */ .token-pill { border-radius: 999px; font-size: 11px; font-weight: 600; transition: border-color .15s, background .15s, box-shadow .15s; } .token-pill:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); box-shadow: var(--shadow-glow); } /* ── Theme toggle ───────────────────────────────────────── */ .btn-theme-toggle { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--elevated); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: border-color .15s, color .15s, background .15s; } .btn-theme-toggle:hover { color: var(--text); border-color: var(--blue); background: var(--blue-dim); } .btn-theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ── Triage sidebar polish ──────────────────────────────── */ .sidebar-panel { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border-left: 1px solid var(--glass-border) !important; box-shadow: -8px 0 32px rgba(0,0,0,.35) !important; } /* ── Insights AI section (moved from inline) ────────────── */ .ai-dash-section { border-top: 1px solid var(--border); background: var(--bg); padding: var(--space-5); } .ai-dash-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-md); } .ai-dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .ai-dash-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em; } .ai-dash-sub { margin: 4px 0 0; font-size: 12px; color: var(--text-3); } .ai-dash-open-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--elevated); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; } .ai-dash-open-btn:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--elevated)); box-shadow: var(--shadow-glow); } .ai-gauge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); } @media (max-width: 900px) { .ai-gauge-grid { grid-template-columns: repeat(2, 1fr); } } .ai-gauge-card { background: var(--elevated); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); text-align: center; } .ai-gauge-card--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-grad-1) 12%, var(--elevated)), var(--elevated)); border-color: color-mix(in srgb, var(--accent-grad-1) 25%, var(--border)); } .ai-gauge-val { font-size: 24px; font-weight: 900; letter-spacing: -.03em; margin-top: -8px; } .ai-gauge-val.good { color: var(--green); } .ai-gauge-val.mid { color: var(--yellow); } .ai-gauge-val.low { color: var(--red); } .ai-gauge-val.muted { color: var(--text-3); font-size: 20px; } .ai-gauge-lbl { font-size: 11px; font-weight: 700; color: var(--text-2); margin-top: 2px; } .ai-gauge-sub { font-size: 10px; color: var(--text-3); margin-top: 4px; } /* ── Config / JIRA / PC Health global uplift ────────────── */ .cfg-page { background: radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--accent-grad-1) 5%, transparent), transparent); } .cfg-kpi { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm); } .cfg-spark-card { background: var(--glass-bg) !important; border-color: var(--glass-border) !important; border-radius: var(--radius-lg) !important; } .js-wrap { height: calc(100vh - 52px) !important; background: var(--bg) !important; } .js-head { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-bottom-color: var(--glass-border) !important; } .ja-wrap { height: calc(100vh - 52px) !important; background: var(--bg) !important; } .pch-page { background: var(--bg); min-height: calc(100vh - 52px); } .pch-topbar { background: var(--glass-bg) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border-bottom-color: var(--glass-border) !important; } .pch-infobar { background: var(--elevated) !important; border: 1px solid var(--border-2); } .insights-page.pch-page { min-height: calc(100vh - 52px); } /* ── Shared card uplift ─────────────────────────────────── */ .card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header { border-bottom: 1px solid var(--border-2); } .card-title { font-weight: 700; letter-spacing: -.01em; } .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--space-6); } .login-card { width: 100%; max-width: 400px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); padding: 40px 36px 36px; box-shadow: var(--shadow-lg); } .login-title { font-family: var(--font-sans); font-size: 24px; font-weight: 800; letter-spacing: -.025em; } .login-sub { font-size: 12px; color: var(--text-3); } /* ── Responsive table ───────────────────────────────────── */ @media (max-width: 1200px) { .page-content { padding: var(--space-4); } .col-process { max-width: 240px; } .col-error { width: 24%; } } @media (max-width: 768px) { .app-nav { padding: 0 12px; gap: 8px; } .nav-link span { display: none; } .nav-link { padding: 14px 8px; } .token-pill { font-size: 10px; padding: 2px 8px; } .filter-search { min-width: 120px; max-width: 100%; flex: 1 1 100%; } } /* ── Grouped occurrence rows ──────────────────────────────────────────── One row per maid; repeats on different PCs collapse in, with the individual timestamps behind the expander. */ .maid-recur-count--hot { background: color-mix(in srgb, #f59e0b 22%, transparent) !important; color: #fbbf24 !important; } .occ-span { font-size: 10.5px; color: var(--text-3); opacity: .8; border: 1px dashed var(--border); border-radius: 5px; padding: 0 5px; margin-left: 6px; } .occ-expand-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; cursor: pointer; font-family: 'JetBrains Mono', monospace; } .occ-expand-btn:hover { border-color: var(--blue); color: var(--blue); } .occ-expand-btn i { transition: transform .15s; font-size: 9px; } .occ-expand-btn.open i { transform: rotate(180deg); } .occ-list { margin: 8px 0 2px; padding: 6px 0 2px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 3px; } .occ-list-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-3); padding: 2px 0 2px 4px; } .occ-list-when { font-family: 'JetBrains Mono', monospace; min-width: 130px; } .occ-list-live { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); background: color-mix(in srgb, var(--blue) 16%, transparent); border-radius: 4px; padding: 1px 5px; } .occ-list-shot { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font-size: 11px; } .occ-list-shot:hover { color: var(--blue); } /* ── View-only accounts ───────────────────────────────────────────────── The server refuses the writes; this only makes the state visible so a viewer is not hunting for why a button did nothing. */ .readonly-banner { display: flex; align-items: center; gap: 9px; padding: 7px 16px; font-size: 12.5px; line-height: 1.45; background: color-mix(in srgb, var(--blue) 14%, var(--elevated)); border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border)); color: var(--text-2); } .readonly-banner i { color: var(--blue); flex-shrink: 0; } .readonly-banner strong { color: var(--text); } /* ── Claude card (rpa-error-resolution skill) in the triage callout ─────── */ .triage-ai-bubble { width: 340px; } .triage-ai-bubble.cl-in { animation: aiBubbleIn .28s cubic-bezier(.2,.8,.2,1); } .triage-ai-bubble:has(.cl-hero) { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%), var(--card); } .triage-ai-bubble-hd .cl-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, #D97757, var(--violet)); color: #fff; font-size: 11px; } .triage-ai-bubble-hd .cl-sub { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-3); } .cl-hero { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; } .cl-ring { --p: 0; flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), color-mix(in srgb, var(--text-3) 20%, transparent) 0); animation: clRing .8s ease-out; } .cl-ring--weak { background: conic-gradient(var(--yellow) calc(var(--p) * 1%), color-mix(in srgb, var(--text-3) 20%, transparent) 0); } .cl-ring span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); font-size: 14px; font-weight: 800; color: var(--text); } .cl-ring small { font-size: 9px; font-weight: 600; color: var(--text-3); } @keyframes clRing { from { transform: rotate(-90deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } } .cl-hero-txt { min-width: 0; } .cl-action { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; color: var(--text); } .cl-action i { color: var(--violet); } .cl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .cl-chip { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); background: var(--surface); } .cl-chip--rule { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--blue); } .cl-urg--very_high { color: #fff; background: var(--red); border-color: var(--red); } .cl-urg--high { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); } .cl-urg--medium { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 50%, transparent); } .cl-urg--low { color: var(--text-3); } .cl-decided { font-size: 11px; color: var(--green); margin-bottom: 8px; } .cl-why { font-size: 12.5px; color: var(--text); line-height: 1.55; } .cl-gap { font-size: 11.5px; color: var(--yellow); } .cl-ev { margin: 0 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .cl-ev summary { cursor: pointer; padding: 6px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-2); list-style: none; } .cl-ev summary::-webkit-details-marker { display: none; } .cl-ev[open] summary { border-bottom: 1px solid var(--border); } .cl-ev p { padding: 8px 10px; margin: 0 !important; font-size: 11.5px; color: var(--text-3); } .cl-sec { margin: 0 0 10px; } .cl-sec-hd { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: 4px; } .cl-sec-hd i { color: var(--violet); } .cl-q { counter-reset: q; list-style: none; padding: 0 !important; margin: 0 !important; } .cl-q li { counter-increment: q; position: relative; padding: 6px 8px 6px 30px; margin-bottom: 4px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text); } .cl-q li::before { content: counter(q); position: absolute; left: 8px; top: 6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--violet); color: #fff; } .cl-pre { white-space: pre-wrap; font-size: 11.5px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface); border-left: 3px solid var(--violet); color: var(--text); } .cl-plan { margin: 12px 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px dashed color-mix(in srgb, var(--violet) 55%, var(--border)); background: color-mix(in srgb, var(--violet) 5%, transparent); } .cl-plan-hd { display: flex; align-items: center; font-size: 11px; font-weight: 800; color: var(--text); margin-bottom: 6px; } .cl-mode { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: var(--elevated); color: var(--text-3); border: 1px solid var(--border); } .cl-steps { list-style: none; padding: 0 !important; margin: 0 0 8px !important; } .cl-steps li { display: flex; gap: 8px; padding: 4px 0; font-size: 12px; color: var(--text); } .cl-steps li i { color: var(--violet); margin-top: 2px; } .cl-steps small { display: block; color: var(--text-3); font-size: 11px; word-break: break-word; } .cl-status { font-size: 11.5px; font-weight: 600; padding: 6px 8px; border-radius: var(--radius-sm); } .cl-status ul { margin: 4px 0 0 !important; font-weight: 400; } .cl-status--ok { color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); } .cl-status--warn { color: var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); } .cl-status--err { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } .cl-foot { font-size: 11px; color: var(--text-3); margin-top: 6px !important; } .cl-foot strong { color: var(--text); } .cl-ask-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--violet) 50%, var(--border)); background: color-mix(in srgb, var(--violet) 12%, transparent); color: var(--text); } .cl-ask-btn:hover { background: color-mix(in srgb, var(--violet) 22%, transparent); } /* ── Triage sidebar: status strip, sub-choices, recipients ─────────────── */ .triage-section--status { padding: 12px 20px 0; } .tw { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); } .tw-ico { font-size: 16px; color: var(--text-3); } .tw-txt { min-width: 0; flex: 1; } .tw-head { font-size: 12.5px; font-weight: 700; color: var(--text); line-height: 1.35; } .tw-since { font-size: 11px; color: var(--text-3); } .tw--dev { border-color: color-mix(in srgb, var(--blue) 45%, var(--border)); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); } .tw--dev .tw-ico { color: var(--blue); } .tw--agent { border-color: color-mix(in srgb, var(--violet) 45%, var(--border)); background: color-mix(in srgb, var(--violet) 8%, var(--surface)); } .tw--agent .tw-ico { color: var(--violet); } .tw--ba { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: color-mix(in srgb, var(--red) 7%, var(--surface)); } .tw--ba .tw-ico { color: var(--red); } .tw--robot { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--green) 8%, var(--surface)); } .tw--robot .tw-ico { color: var(--green); } .tw-timeline { list-style: none; margin: 8px 0 0; padding: 0 0 0 6px; border-left: 2px solid var(--border); } .tw-timeline li { display: flex; gap: 8px; padding: 5px 0 5px 8px; font-size: 12px; color: var(--text-2); } .tw-timeline li i { color: var(--text-3); margin-top: 1px; } .tw-timeline li small { display: block; color: var(--text-3); font-size: 10.5px; } .tw-timeline li a { color: var(--blue); text-decoration: none; } .tw-timeline li.tw-err { color: var(--red); } .triage-action-hint { font-size: 11.5px; color: var(--text-3); margin: 0 0 12px; } .triage-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .triage-choice--3 { grid-template-columns: repeat(3, 1fr); } .triage-choice-btn { position: relative; display: flex; align-items: flex-start; gap: 7px; text-align: left; padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 700; transition: border-color .12s, background .12s; } .triage-choice-btn i { margin-top: 1px; color: var(--text-3); } .triage-choice-btn small { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-3); margin-top: 1px; } .triage-choice-btn:hover { border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); } .triage-choice-btn.active { border-color: var(--violet); color: var(--text); background: color-mix(in srgb, var(--violet) 10%, var(--surface)); } .triage-choice-btn.active i { color: var(--violet); } .triage-choice-btn.ai-suggested::after, .triage-action-tab.ai-suggested::before { content: '✦ Claude'; position: absolute; top: -7px; right: 6px; font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #D97757, var(--violet)); color: #fff; } .triage-action-tab { position: relative; } .triage-recips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 6px; } .triage-recips-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--text-3); margin-right: 2px; } .triage-recips-lbl:not(:first-child) { margin-left: 6px; } .triage-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--elevated); border: 1px solid var(--border); color: var(--text-2); } .triage-check-row { display: flex; gap: 16px; flex-wrap: wrap; }