/* ============================================================ Mr. Compliance — Admin UI styles ------------------------------------------------------------ Built on the Admin design system tokens (tokens.css + fonts.css). This file produces all of the existing admin class names (.btn, .card, .badge, .sidebar, .stat-card, .filter-bar, …) composed from semantic tokens. Visual changes happen here or in tokens.css; templates do not need to change. ============================================================ */ /* ── Theme aliases ────────────────────────────────────────── Map the legacy variable names that templates still reference to the canonical design-system tokens. The dashboard JS toggles `data-theme` on ; we mirror that to the body too so the design system's `body.dark` rules also fire if needed. */ :root { --bg-body: var(--surface-bg); --bg-card: var(--surface-primary); --bg-input: var(--surface-primary); --bg-code: var(--surface-tertiary); --bg-subtle: var(--surface-secondary); --bg-hover: var(--surface-tertiary); --text-heading: var(--text-primary); --text-label: var(--grey-600); --text-muted: var(--grey-500); --text-faint: var(--text-tertiary); --border-input: var(--border-default); --link-color: var(--text-link); --focus-ring: rgba(37, 99, 235, 0.18); --filter-active-bg: var(--text-primary); --filter-active-text: var(--text-inverse); /* Flash banners — soft tinted surfaces */ --flash-success-bg: var(--status-success-bg); --flash-success-text: var(--status-success-text); --flash-success-border: var(--green-200); --flash-error-bg: var(--status-danger-bg); --flash-error-text: var(--status-danger-text); --flash-error-border: var(--red-200); --flash-info-bg: var(--accent-bg); --flash-info-text: var(--blue-700); --flash-info-border: var(--blue-200); --flash-warning-bg: var(--status-warning-bg); --flash-warning-text: var(--status-warning-text); --flash-warning-border: var(--amber-200); --alert-bg: #fff7ed; --alert-text: #9a3412; --alert-border: #fed7aa; --action-error: var(--red-700); --xref-bg: var(--accent-bg); --xref-hover-bg: var(--blue-200); /* Sidebar */ --sidebar-bg: var(--surface-primary); --sidebar-border: var(--border-default); --sidebar-brand: var(--text-primary); --sidebar-group: var(--text-tertiary); --sidebar-link: var(--text-secondary); --sidebar-link-hover-bg: var(--surface-secondary); --sidebar-link-hover: var(--text-primary); --sidebar-active-bg: var(--surface-secondary); --sidebar-active-text: var(--text-primary); --sidebar-footer-border: var(--border-default); --sidebar-footer-text: var(--text-tertiary); --sidebar-footer-btn: var(--text-secondary); --sidebar-footer-btn-hover: var(--text-primary); --pipeline-track: var(--border-default); /* Layout constants */ --app-sidebar-width: 240px; --app-content-max: 1200px; } [data-theme="dark"] { /* Mirror the design system dark theme (body.dark) onto data-theme */ --surface-bg: var(--grey-950); --surface-primary: #111416; --surface-secondary: #181b1e; --surface-tertiary: #1e2226; --surface-overlay: rgba(0, 0, 0, 0.65); --surface-header: #111416; --surface-sidebar: #111416; --bg-gradient: var(--grey-950); --text-primary: rgba(255, 255, 255, 0.87); --text-secondary: rgba(255, 255, 255, 0.55); --text-tertiary: rgba(255, 255, 255, 0.30); --text-inverse: var(--grey-950); --text-link: #7aafff; --text-on-dark: rgba(255, 255, 255, 0.87); --border-default: rgba(255, 255, 255, 0.09); --border-subtle: rgba(255, 255, 255, 0.05); --border-strong: rgba(255, 255, 255, 0.13); --accent: #3d7fff; --accent-hover: #5a94ff; --accent-bg: rgba(61, 127, 255, 0.12); --accent-subtle: rgba(61, 127, 255, 0.06); --status-success: #4aaa7a; --status-success-hover: #5cbf8c; --status-success-bg: rgba(46, 107, 74, 0.28); --status-success-text: #4aaa7a; --status-warning: #d4902a; --status-warning-hover: #e0a040; --status-warning-bg: rgba(140, 96, 14, 0.28); --status-warning-text: #d4902a; --status-danger: #c45050; --status-danger-hover: #d06060; --status-danger-bg: rgba(160, 40, 40, 0.28); --status-danger-text: #c45050; --tier-1-bg: rgba(46, 107, 74, 0.28); --tier-1-text: #4aaa7a; --tier-2-bg: rgba(140, 96, 14, 0.28); --tier-2-text: #d4902a; --tier-3-bg: rgba(160, 40, 40, 0.28); --tier-3-text: #c45050; --tier-4-bg: rgba(160, 40, 40, 0.28); --tier-4-text: #c45050; --card-shadow: none; --card-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.06); /* Legacy aliases override */ --text-label: rgba(255, 255, 255, 0.62); --text-muted: rgba(255, 255, 255, 0.55); --focus-ring: rgba(61, 127, 255, 0.32); --action-error: #c45050; --xref-bg: rgba(61, 127, 255, 0.12); --xref-hover-bg: rgba(61, 127, 255, 0.22); --alert-bg: rgba(140, 96, 14, 0.18); --alert-text: #d4902a; --alert-border: rgba(140, 96, 14, 0.4); --sidebar-bg: var(--surface-primary); --sidebar-border: var(--border-default); --sidebar-active-bg: var(--surface-secondary); --filter-active-bg: var(--text-link); --filter-active-text: var(--surface-primary); } /* ── Reset & base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--body-font); font-size: var(--body-size); /* 14px */ font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--surface-bg); color: var(--text-primary); line-height: 1.5; letter-spacing: 0; } a { color: var(--text-link); text-decoration: none; transition: color var(--ease-default); } a:hover { text-decoration: underline; } button { font-family: inherit; } /* Heading scale — matches design system */ h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--heading-font); font-weight: 500; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1.2; } h1 { font-size: var(--text-7xl); line-height: 1.1; letter-spacing: -0.025em; } h2 { font-size: var(--text-5xl); line-height: 1.1; } h3 { font-size: var(--text-3xl); line-height: 1.25; } h4 { font-size: var(--text-2xl); line-height: 1.3; } h5 { font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.01em; } h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.5px; } /* Page-level title — brand-font display style. Use on top-of-page

. */ .page-title { font-family: var(--brand-font); font-weight: 300; font-size: var(--text-7xl); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: var(--space-12); display: flex; align-items: baseline; gap: var(--space-6); } .page-title small, .page-title .count-badge { font-family: var(--body-font); font-size: var(--text-lg); font-weight: 500; color: var(--text-tertiary); letter-spacing: 0; } /* Subtitle for a page — sits under .page-title, lighter and intro-y. */ .page-subtitle { font-size: var(--text-md); color: var(--text-secondary); margin: calc(-1 * var(--space-6)) 0 var(--space-12); max-width: 70ch; line-height: 1.5; } /* Page header bar — title on the left, primary action on the right. */ .page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-12); } .page-header .page-title { margin-bottom: 0; } /* Section label inside a form (eg "Source Requirement" / "Target Requirement"). */ .form-section-label { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } /* ── Sidebar ──────────────────────────────────────────────── Fixed left rail with brand, grouped nav, footer. Width 240px to match the design system. */ .sidebar { width: var(--app-sidebar-width); height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); padding: var(--space-12) 0 0; z-index: 50; } .sidebar-nav { flex: 1; overflow-y: auto; padding-bottom: var(--space-4); } .sidebar .brand { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding: 0 var(--space-12) var(--space-12); color: var(--sidebar-brand); text-decoration: none; } .sidebar .brand:hover { text-decoration: none; color: var(--sidebar-brand); } .sidebar .brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-primary); } .sidebar .brand .brand-mark svg { display: block; } .sidebar .brand .brand-wordmark { font-family: var(--brand-font); font-weight: 300; font-size: var(--text-3xl); letter-spacing: -0.015em; line-height: 1; } .sidebar .brand .brand-kbd { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 4px; margin-top: -.1rem; font-size: .58rem; color: var(--text-muted, var(--text-tertiary)); opacity: .55; } .sidebar .brand .brand-kbd kbd { font-family: inherit; border: 1px solid var(--border-subtle); border-radius: 3px; padding: 0 3px; background: var(--surface-secondary); line-height: 1.2; } .sidebar-group-title { padding: var(--space-8) var(--space-12) var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--sidebar-group); text-transform: uppercase; letter-spacing: 0.06em; } .sidebar a { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-12); color: var(--sidebar-link); font-size: var(--text-md); font-weight: 500; text-decoration: none; border-left: 2px solid transparent; transition: background var(--ease-default), color var(--ease-default); } .sidebar a:hover { background: var(--sidebar-link-hover-bg); color: var(--sidebar-link-hover); text-decoration: none; } .sidebar a.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); border-left-color: var(--text-primary); } .sidebar a .nav-icon { width: var(--icon-size-md); height: var(--icon-size-md); flex-shrink: 0; color: currentColor; stroke-width: var(--icon-stroke); } .sidebar a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-footer { padding: var(--space-8) var(--space-12); border-top: 1px solid var(--sidebar-footer-border); font-size: var(--text-md); flex-shrink: 0; background: var(--sidebar-bg); } .sidebar-footer .sidebar-user { color: var(--sidebar-footer-text); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-3); } .sidebar-footer .sidebar-user::before { content: ""; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface-secondary); border: 1px solid var(--border-default); display: inline-block; flex-shrink: 0; } .sidebar-footer button { background: none; border: none; color: var(--sidebar-footer-btn); font-size: var(--text-md); cursor: pointer; padding: 0; font-weight: 500; } .sidebar-footer button:hover { color: var(--sidebar-footer-btn-hover); } .sidebar-footer .sidebar-footer-row { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; } .sidebar-footer .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: transparent; color: var(--sidebar-footer-btn); cursor: pointer; padding: 0; transition: border-color var(--ease-default), color var(--ease-default); } .sidebar-footer .theme-toggle:hover { border-color: var(--text-secondary); color: var(--sidebar-footer-btn-hover); } .sidebar .sidebar-collapsible { display: contents; } .sidebar .sidebar-collapsible > summary.sidebar-parent { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-12); /* font: inherit overrides the browser default font. */ font: inherit; font-size: var(--text-md); font-weight: 500; color: var(--sidebar-link); text-decoration: none; border-left: 2px solid transparent; transition: background var(--ease-default), color var(--ease-default); list-style: none; cursor: pointer; } .sidebar .sidebar-collapsible > summary.sidebar-parent:hover { background: var(--sidebar-link-hover-bg); color: var(--sidebar-link-hover); } .sidebar .sidebar-collapsible > summary.sidebar-parent.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-text); border-left-color: var(--text-primary); } .sidebar .sidebar-collapsible > summary.sidebar-parent::-webkit-details-marker { display: none; } .sidebar .sidebar-collapsible > summary.sidebar-parent .nav-icon { width: var(--icon-size-md); height: var(--icon-size-md); flex-shrink: 0; color: currentColor; stroke-width: var(--icon-stroke); } .sidebar .sidebar-collapsible > summary.sidebar-parent > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar .sidebar-chevron { width: var(--icon-size-sm, 16px); height: var(--icon-size-sm, 16px); flex-shrink: 0; transition: transform .15s ease; opacity: .6; } .sidebar .sidebar-collapsible[open] > summary > .sidebar-chevron { transform: rotate(90deg); } .sidebar .sidebar-collapsible > .sidebar-child { display: none; } .sidebar .sidebar-collapsible[open] > .sidebar-child { display: flex; } .sidebar a.sidebar-parent { font-weight: 600; color: var(--sidebar-link-hover); } .sidebar a.sidebar-child, .sidebar .sidebar-collapsible > .sidebar-child { padding-left: var(--space-20); font-size: var(--text-base-2); color: var(--sidebar-link); font-weight: 400; } .sidebar a.sidebar-child::before, .sidebar .sidebar-collapsible > .sidebar-child::before { content: "·"; color: var(--sidebar-group); margin-right: var(--space-3); } /* Mobile hamburger */ .hamburger { display: none; position: fixed; top: var(--space-5); left: var(--space-5); z-index: 200; background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--text-3xl); cursor: pointer; line-height: 1; box-shadow: var(--shadow-sm); } .sidebar-overlay { display: none; } /* ── Main content area ─────────────────────────────────────── */ .main-content { margin-left: var(--app-sidebar-width); padding: var(--space-16) var(--space-20); max-width: calc(var(--app-content-max) + var(--app-sidebar-width)); } /* ── Flash banners ─────────────────────────────────────────── */ .flash { padding: var(--space-6) var(--space-10); border-radius: var(--card-radius-sm); margin-bottom: var(--space-10); font-size: var(--text-md); border: 1px solid transparent; } .flash-success { background: var(--flash-success-bg); color: var(--flash-success-text); border-color: var(--flash-success-border); } .flash-error { background: var(--flash-error-bg); color: var(--flash-error-text); border-color: var(--flash-error-border); } .flash-info { background: var(--flash-info-bg); color: var(--flash-info-text); border-color: var(--flash-info-border); } .flash-warning { background: var(--flash-warning-bg); color: var(--flash-warning-text); border-color: var(--flash-warning-border); } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--card-radius); padding: var(--card-padding-lg); margin-bottom: var(--space-8); box-shadow: var(--card-shadow); transition: box-shadow var(--ease-default), border-color var(--ease-default); } .card:hover { box-shadow: var(--card-shadow-hover); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); gap: var(--space-6); } .card-header h3 { font-family: var(--body-font); font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; } .card-meta { font-size: var(--text-base); color: var(--text-tertiary); } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-10); border-radius: var(--button-radius); font-size: var(--text-md); line-height: 1.2; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--ease-default); white-space: nowrap; font-family: inherit; } .btn:hover { text-decoration: none; } .btn:focus-visible { outline: 2px solid var(--text-link); outline-offset: 2px; } .btn-primary { background: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary); } .btn-primary:hover { background: var(--grey-700); border-color: var(--grey-700); } .btn-secondary { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-default); } .btn-secondary:hover { border-color: var(--text-secondary); background: var(--surface-secondary); } .btn-danger { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: transparent; } .btn-danger:hover { background: var(--status-danger); color: var(--text-inverse); } .btn-approve { background: var(--status-success-bg); color: var(--status-success-text); border-color: transparent; } .btn-approve:hover { background: var(--status-success); color: var(--text-inverse); } .btn-reject { background: var(--surface-secondary); color: var(--text-secondary); border-color: var(--border-default); } .btn-reject:hover { background: var(--surface-tertiary); color: var(--text-primary); } .btn-reject-outline { background: transparent; color: var(--status-danger); border-color: var(--status-danger) !important; } .btn-reject-outline:hover { background: var(--status-danger-bg); color: var(--status-danger); } .btn-sm { padding: var(--space-3) var(--space-6); font-size: var(--text-base); } .btn-group { display: flex; gap: var(--space-4); flex-wrap: wrap; } /* ── Filter bar ────────────────────────────────────────────── */ .filter-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-10); flex-wrap: wrap; align-items: center; } .filter-bar a { padding: var(--space-3) var(--space-8); border-radius: var(--button-radius); font-size: var(--text-base); font-weight: 500; background: var(--surface-primary); color: var(--text-secondary); border: 1px solid var(--border-default); text-decoration: none; transition: all var(--ease-default); } .filter-bar a:hover { background: var(--surface-secondary); color: var(--text-primary); text-decoration: none; border-color: var(--text-secondary); } .filter-bar a.active { background: var(--filter-active-bg); color: var(--filter-active-text); border-color: var(--filter-active-bg); } /* ── Search bar ────────────────────────────────────────────── */ .search-bar { display: flex; gap: var(--space-3); margin-bottom: var(--space-10); align-items: center; } .search-bar input[type="text"] { flex: 1; padding: var(--space-5) var(--space-8); border: 1px solid var(--border-default); border-radius: var(--button-radius); font-size: var(--text-md); font-family: inherit; background: var(--surface-primary); color: var(--text-primary); transition: border-color var(--ease-default), box-shadow var(--ease-default); } .search-bar input[type="text"]::placeholder { color: var(--text-tertiary); } .search-bar input[type="text"]:focus { outline: none; border-color: var(--text-link); box-shadow: 0 0 0 3px var(--focus-ring); } /* ── Status badges ─────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; font-size: var(--text-base-2); font-weight: 500; padding: 3px var(--space-5); border-radius: var(--badge-radius); letter-spacing: 0; line-height: 1.4; text-transform: capitalize; white-space: nowrap; } /* Lifecycle / status palettes */ .badge-pending { background: var(--amber-100); color: var(--amber-800); } .badge-executed { background: var(--green-100); color: var(--green-800); } .badge-approved { background: var(--blue-100); color: var(--blue-700); } .badge-rejected { background: var(--grey-150); color: var(--grey-600); } .badge-failed { background: var(--red-100); color: var(--red-800); } .badge-mixed { background: var(--purple-100); color: var(--purple-700); } .badge-superseded { background: var(--grey-150); color: var(--grey-500); } .badge-unknown { background: var(--grey-150); color: var(--grey-600); } .badge-open { background: var(--amber-100); color: var(--amber-800); } .badge-investigating { background: var(--blue-100); color: var(--blue-700); } .badge-implementing { background: var(--purple-100); color: var(--purple-700); } .badge-verifying { background: var(--purple-100); color: var(--purple-700); } .badge-closed { background: var(--grey-150); color: var(--grey-600); } .badge-in-progress, .badge-in_progress, .badge-in_review { background: var(--blue-100); color: var(--blue-700); } .badge-done { background: var(--green-100); color: var(--green-800); } .badge-cancelled { background: var(--grey-150); color: var(--grey-600); } .badge-mitigated { background: var(--green-100); color: var(--green-800); } .badge-accepted { background: var(--grey-150); color: var(--grey-600); } .badge-critical { background: var(--red-100); color: var(--red-800); } .badge-high { background: var(--orange-100); color: var(--orange-900); } .badge-medium { background: var(--amber-100); color: var(--amber-800); } .badge-low { background: var(--green-100); color: var(--green-800); } .badge-major { background: var(--orange-100); color: var(--orange-900); } .badge-minor { background: var(--amber-100); color: var(--amber-800); } .badge-observation { background: var(--green-100); color: var(--green-800); } .badge-identified { background: var(--amber-100); color: var(--amber-800); } .badge-assessed { background: var(--blue-100); color: var(--blue-700); } .badge-monitoring { background: var(--purple-100); color: var(--purple-700); } .badge-active { background: var(--green-100); color: var(--green-800); } .badge-under_review { background: var(--blue-100); color: var(--blue-700); } .badge-inactive { background: var(--grey-150); color: var(--grey-600); } .badge-signed { background: var(--green-100); color: var(--green-800); } .badge-expired { background: var(--red-100); color: var(--red-800); } .badge-not_required { background: var(--grey-150); color: var(--grey-600); } .badge-upcoming { background: var(--blue-100); color: var(--blue-700); } .badge-overdue { background: var(--red-100); color: var(--red-800); } .badge-completed { background: var(--green-100); color: var(--green-800); } .badge-reported { background: var(--amber-100); color: var(--amber-800); } .badge-confirmed { background: var(--red-100); color: var(--red-800); } .badge-serious { background: var(--red-100); color: var(--red-800); } .badge-non_serious { background: var(--amber-100); color: var(--amber-800); } .badge-planned { background: var(--grey-150); color: var(--grey-600); } .badge-draft { background: var(--grey-150); color: var(--grey-600); } .badge-submitted { background: var(--amber-100); color: var(--amber-800); } .badge-equivalent { background: var(--green-100); color: var(--green-800); } .badge-partial { background: var(--amber-100); color: var(--amber-800); } .badge-supports { background: var(--blue-100); color: var(--blue-700); } .badge-admin { background: var(--red-100); color: var(--red-800); } .badge-prrc { background: var(--purple-100); color: var(--purple-700); } .badge-dpo { background: var(--purple-100); color: var(--purple-700); } .badge-qa_manager { background: var(--blue-100); color: var(--blue-700); } .badge-developer { background: var(--green-100); color: var(--green-800); } .badge-viewer { background: var(--grey-150); color: var(--grey-600); } .badge-agent { background: var(--blue-100); color: var(--blue-700); } .badge-manual { background: var(--grey-150); color: var(--grey-600); } .badge-slack { background: var(--purple-100); color: var(--purple-700); } .badge-github { background: var(--green-100); color: var(--green-800); } .badge-notion { background: var(--amber-100); color: var(--amber-800); } .badge-gdrive { background: var(--purple-100); color: var(--purple-700); } .badge-documentation_review { background: var(--blue-100); color: var(--blue-700); } .badge-risk_assessment { background: var(--amber-100); color: var(--amber-800); } .badge-audit { background: var(--purple-100); color: var(--purple-700); } .badge-dpa_review { background: var(--purple-100); color: var(--purple-700); } .badge-certification_check { background: var(--green-100); color: var(--green-800); } .badge-approval { background: var(--green-100); color: var(--green-800); } .badge-not_applicable { background: var(--grey-150); color: var(--grey-600); } .badge-pending_approval { background: var(--amber-100); color: var(--amber-800); } .badge-initial { background: var(--blue-100); color: var(--blue-700); } .badge-re_qualification { background: var(--amber-100); color: var(--amber-800); } .badge-for_cause { background: var(--red-100); color: var(--red-800); } .badge-capa { background: var(--orange-100); color: var(--orange-900); } /* Semantic badge variants (used by templates that don't carry an enum). */ .badge-danger { background: var(--red-100); color: var(--red-800); } .badge-warning { background: var(--amber-100); color: var(--amber-800); } .badge-success { background: var(--green-100); color: var(--green-800); } .badge-info { background: var(--blue-100); color: var(--blue-700); } .badge-muted { background: var(--grey-150); color: var(--grey-600); } .badge-queued { background: var(--amber-100); color: var(--amber-800); } .badge-running { background: var(--blue-100); color: var(--blue-700); } .badge-skipped { background: var(--grey-150); color: var(--grey-600); } /* ── Action list ───────────────────────────────────────────── */ .action-list { list-style: none; } .action-list li { padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-5); } .action-list li:first-child { border-top: none; } .action-label { color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action-error { color: var(--action-error); font-size: var(--text-base); margin-top: var(--space-2); } .action-superseded { text-decoration: line-through; opacity: 0.55; } /* ── Detail page ───────────────────────────────────────────── */ .back-link { font-size: var(--text-md); color: var(--text-secondary); } .back-link:hover { color: var(--text-link); } .detail-action { padding: var(--space-8) 0; border-top: 1px solid var(--border-default); } .detail-action:first-of-type { border-top: none; } .detail-field { margin-bottom: var(--space-3); font-size: var(--text-md); } .detail-label { color: var(--text-secondary); font-weight: 500; } .detail-content pre { background: var(--surface-tertiary); border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); padding: var(--space-8); font-family: var(--code-font); font-size: var(--text-base); white-space: pre-wrap; word-break: break-word; margin: var(--space-3) 0 var(--space-5); max-height: 24rem; overflow-y: auto; color: var(--text-primary); } /* ── Batch detail page ─────────────────────────────────────── */ .batch-header { margin-bottom: var(--space-6); } .batch-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4) var(--space-12); margin-top: var(--space-8); padding: var(--space-8); background: var(--surface-secondary); border-radius: var(--card-radius-sm); font-size: var(--text-base); } .batch-meta-item { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .batch-meta-label { color: var(--text-tertiary); font-weight: 500; text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.04em; } .batch-meta-value { color: var(--text-primary); overflow-wrap: anywhere; font-size: var(--text-md); } .batch-meta-value code { background: transparent; padding: 0; font-size: var(--text-base); } .origin-chip { display: inline-block; padding: 2px var(--space-5); border-radius: var(--radius-sm); background: var(--xref-bg); color: var(--text-link); font-size: var(--text-base); text-transform: capitalize; font-weight: 500; } .origin-chip:hover { background: var(--xref-hover-bg); } .framework-chip { display: inline-block; padding: 2px var(--space-5); border-radius: var(--radius-sm); background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; margin-left: var(--space-3); } .why-panel { margin-top: var(--space-8); padding: var(--space-5) var(--space-8); background: var(--surface-secondary); border-radius: var(--card-radius-sm); font-size: var(--text-md); } .why-panel summary { cursor: pointer; color: var(--text-primary); font-weight: 500; padding: var(--space-3) 0; } .triggering-message { margin: var(--space-5) 0 var(--space-3); padding: var(--space-5) var(--space-8); border-left: 3px solid var(--text-link); background: var(--surface-primary); white-space: pre-wrap; color: var(--text-secondary); font-size: var(--text-md); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .detail-action-card { margin-bottom: var(--space-12); padding: var(--card-padding-lg) var(--space-12); scroll-margin-top: var(--space-12); } .action-card-failed { border-left: 4px solid var(--status-danger); } .action-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-8); margin-bottom: var(--space-8); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .action-card-title { display: flex; align-items: baseline; gap: var(--space-6); min-width: 0; flex: 1; } .action-card-heading { font-size: var(--text-2xl); font-weight: 500; color: var(--text-primary); margin: 0; overflow-wrap: anywhere; line-height: 1.3; } .action-card-chips { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .action-seq { display: inline-block; min-width: 2.75rem; padding: 2px var(--space-5); background: var(--surface-secondary); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-align: center; font-family: var(--code-font); flex-shrink: 0; } .notion-link { font-size: var(--text-base); color: var(--text-link); white-space: nowrap; } .notion-link:hover { text-decoration: underline; } /* Pre-/post-execution Notion target banner on each write_notion action card. */ .notion-target { margin: var(--space-5) 0 var(--space-8); padding: var(--space-5) var(--space-8); border-radius: var(--card-radius-sm); font-size: var(--text-md); line-height: 1.4; } .notion-target a { color: var(--text-link); word-break: break-word; } .notion-target a:hover { text-decoration: underline; } .notion-target-existing { background: var(--surface-secondary); border-left: 3px solid var(--text-link); } .notion-target-new { background: var(--surface-secondary); border-left: 3px solid var(--text-tertiary); color: var(--text-secondary); } .notion-target-hint { display: block; margin-top: var(--space-2); color: var(--text-tertiary); font-size: var(--text-sm); } .notion-target-executed { background: var(--status-success-bg); border-left: 3px solid var(--status-success); color: var(--text-primary); } .batch-header .card-header .diff-stat { background: transparent; padding: 0 var(--space-2); font-size: var(--text-base); font-weight: 500; } .actions-toc { margin-bottom: var(--space-10); padding: var(--space-8) var(--space-10); background: var(--surface-secondary); border-radius: var(--card-radius-sm); font-size: var(--text-md); } .actions-toc-label { display: block; color: var(--text-tertiary); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; margin-bottom: var(--space-5); } .actions-toc ol { list-style: decimal inside; padding-left: 0; margin: 0; } .actions-toc li { padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; border-radius: var(--radius-sm); } .actions-toc li.toc-failed { border-left: 3px solid var(--status-danger); padding-left: var(--space-5); background: var(--status-danger-bg); } .actions-toc li > a { color: var(--text-link); text-decoration: none; overflow-wrap: anywhere; } .actions-toc li > a:hover { text-decoration: underline; } .actions-toc .diff-stat { font-size: var(--text-sm); padding: 0 var(--space-3); } .batch-meta-hint { color: var(--text-tertiary); font-size: var(--text-base); font-style: italic; } .rationale-block { margin: var(--space-8) 0 var(--space-10); padding: var(--space-6) var(--space-8); background: var(--surface-secondary); border-left: 3px solid var(--text-link); border-radius: 0 var(--card-radius-sm) var(--card-radius-sm) 0; font-size: var(--text-lg); } .rationale-block .detail-label { display: block; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); } .rationale-block p { margin: 0; color: var(--text-primary); white-space: pre-wrap; line-height: 1.5; } .diff-summary { display: flex; gap: var(--space-3); align-items: center; margin: var(--space-5) 0; font-size: var(--text-sm); font-weight: 600; } .diff-stat { padding: 2px var(--space-5); border-radius: var(--radius-sm); font-family: var(--code-font); } .diff-stat-add { background: var(--green-100); color: var(--green-800); } .diff-stat-del { background: var(--red-100); color: var(--red-800); } .diff-stat-new { background: var(--blue-100); color: var(--blue-700); } .diff-stat-noop { background: var(--surface-secondary); color: var(--text-tertiary); } .diff-stat-warn { background: var(--flash-warning-bg); color: var(--flash-warning-text); border: 1px solid var(--flash-warning-border); } [data-theme="dark"] .diff-stat-add { background: rgba(46, 107, 74, 0.28); color: #4ade80; } [data-theme="dark"] .diff-stat-del { background: rgba(160, 40, 40, 0.28); color: #fca5a5; } [data-theme="dark"] .diff-stat-new { background: rgba(61, 127, 255, 0.18); color: #60a5fa; } .diff-wrap { margin-top: var(--space-5); } .diff-wrap > summary { cursor: pointer; color: var(--text-primary); font-weight: 500; padding: var(--space-3) 0; font-size: var(--text-md); } .diff-scroll { max-height: 32rem; overflow: auto; border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); margin-top: var(--space-5); } .diff-table { width: 100%; border-collapse: collapse; font-family: var(--code-font); font-size: var(--text-base); table-layout: fixed; } .diff-table + .diff-table { border-top: 1px solid var(--border-default); } .diff-hunk-header { background: var(--surface-secondary); color: var(--text-tertiary); padding: var(--space-3) var(--space-8); text-align: left; font-weight: 500; font-size: var(--text-sm); } .diff-line { line-height: 1.45; } .diff-line td { padding: 0 var(--space-4); border-top: 1px solid var(--border-subtle); vertical-align: top; } .diff-line td:first-child { border-top-color: var(--border-default); } .diff-lineno { width: 3rem; min-width: 3rem; max-width: 3rem; text-align: right; user-select: none; color: var(--text-tertiary); padding-right: var(--space-5); padding-left: var(--space-5); border-right: 1px solid var(--border-subtle); } .diff-marker { width: 1.25rem; min-width: 1.25rem; text-align: center; user-select: none; color: var(--text-tertiary); font-weight: 600; } .diff-line-add .diff-marker { color: var(--green-700); } .diff-line-del .diff-marker { color: var(--red-700); } .diff-content { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; padding-left: var(--space-5) !important; } .diff-line-add { background: var(--green-50); } .diff-line-add .diff-content { color: var(--green-900); } .diff-line-del { background: var(--red-50); } .diff-line-del .diff-content { color: var(--red-900); } .diff-line-ctx .diff-content { color: var(--text-secondary); } [data-theme="dark"] .diff-line-add { background: rgba(34, 197, 94, 0.12); } [data-theme="dark"] .diff-line-add .diff-content, [data-theme="dark"] .diff-line-add .diff-marker { color: #86efac; } [data-theme="dark"] .diff-line-del { background: rgba(239, 68, 68, 0.12); } [data-theme="dark"] .diff-line-del .diff-content, [data-theme="dark"] .diff-line-del .diff-marker { color: #fca5a5; } /* Word-level highlights inside paired add/del lines. Renders as a darker pill of the same hue so the eye lands on the exact words that moved. */ .diff-content del.diff-word-del, .diff-content ins.diff-word-add { text-decoration: none; border-radius: 2px; padding: 0 2px; } .diff-content del.diff-word-del { background: var(--red-100); color: var(--red-900); box-shadow: inset 0 0 0 1px rgba(160, 40, 40, 0.18); } .diff-content ins.diff-word-add { background: var(--green-100); color: var(--green-900); box-shadow: inset 0 0 0 1px rgba(46, 107, 74, 0.18); } [data-theme="dark"] .diff-content del.diff-word-del { background: rgba(160, 40, 40, 0.45); color: #fecaca; box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.35); } [data-theme="dark"] .diff-content ins.diff-word-add { background: rgba(46, 107, 74, 0.50); color: #bbf7d0; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35); } /* Per-edit container that holds the source-diff pane and the rendered-preview pane side-by-side. */ .edit-block { margin-top: var(--space-6); } .edit-block > summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-weight: 600; font-size: var(--text-md); padding: var(--space-3) 0; } .diff-pane { margin-top: var(--space-5); } .diff-pane > .diff-pane-summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: var(--space-2) 0; } .diff-pane[open] > .diff-pane-summary { color: var(--text-secondary); } /* Tab toggle: only one of the two views is visible at a time. Two hidden radio inputs precede the tab labels and tab panels in DOM order, so we can drive everything from `:checked` + sibling combinators (~). No JS for the toggle itself — htmldiff still runs on page load and the result sits in the DOM whether or not the source-diff tab is currently active. */ .view-toggle { margin-top: var(--space-3); } .view-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .view-toggle-tabs { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-4); background: var(--surface-secondary); } .view-toggle-tab { padding: var(--space-2) var(--space-6); font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--text-tertiary); user-select: none; border-right: 1px solid var(--border-default); transition: background 80ms ease, color 80ms ease; } .view-toggle-tab:last-child { border-right: 0; } .view-toggle-tab:hover { color: var(--text-primary); } /* Active-state styling — radio order is rendered-first then source. */ .view-toggle-input-rendered:checked ~ .view-toggle-tabs .view-toggle-tab-rendered, .view-toggle-input-source:checked ~ .view-toggle-tabs .view-toggle-tab-source { background: var(--surface-primary, white); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--text-link); } /* Default-hide both tabs, then reveal whichever radio is checked. */ .view-tab { display: none; } .view-toggle-input-rendered:checked ~ .view-tab-rendered { display: block; } .view-toggle-input-source:checked ~ .view-tab-source { display: block; } /* Mirror keyboard focus from the (visually hidden) radio onto the matching visible label. The rendered radio sits at position 1 and the source radio at position 2 in the DOM, so we use adjacent-sibling combinators to map focus to the right tab label. */ .view-toggle-input-rendered:focus-visible ~ .view-toggle-tabs .view-toggle-tab-rendered, .view-toggle-input-source:focus-visible ~ .view-toggle-tabs .view-toggle-tab-source { outline: 2px solid var(--text-link); outline-offset: 2px; } /* Rendered preview: a single unified pane that mirrors the source-diff idea — both versions are rendered to HTML and then merged via htmldiff.js, so additions appear inline as (green) and removals as (red, strikethrough). Same affordance as the source-diff above, just on the rendered output. */ .rendered-preview { margin-top: var(--space-3); } .rendered-preview-pane { border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); overflow: hidden; background: var(--surface-primary, var(--surface-secondary)); } .rendered-preview-body { padding: var(--space-5) var(--space-6); font-size: var(--text-base); line-height: 1.55; max-height: 40rem; overflow: auto; word-break: break-word; overflow-wrap: anywhere; } /* The htmldiff.js library wraps inserted content in and removed content in . Style them to match the source-diff word highlights so the visual language is consistent between the two panes. */ .rendered-preview-output ins { background: var(--green-100); color: var(--green-900); text-decoration: none; padding: 0 2px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(46, 107, 74, 0.18); } .rendered-preview-output del { background: var(--red-100); color: var(--red-900); text-decoration: line-through; padding: 0 2px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(160, 40, 40, 0.18); } [data-theme="dark"] .rendered-preview-output ins { background: rgba(46, 107, 74, 0.5); color: #bbf7d0; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.35); } [data-theme="dark"] .rendered-preview-output del { background: rgba(160, 40, 40, 0.45); color: #fecaca; box-shadow: inset 0 0 0 1px rgba(252, 165, 165, 0.35); } /* htmldiff also marks whole tag-level inserts/removes with class hints. */ .rendered-preview-output ins.diffins, .rendered-preview-output ins.mod { border-left: 2px solid var(--green-700, #15803d); } .rendered-preview-output del.diffdel, .rendered-preview-output del.mod { border-left: 2px solid var(--red-700, #b91c1c); } .rendered-preview-fallback::before { content: "Rendered diff unavailable — showing 'after' only."; display: block; font-size: var(--text-sm); color: var(--flash-warning-text); background: var(--flash-warning-bg); border: 1px solid var(--flash-warning-border); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-sm); } .rendered-preview-body > *:first-child { margin-top: 0; } .rendered-preview-body > *:last-child { margin-bottom: 0; } .rendered-preview-body table.rendered-preview-table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } .rendered-preview-body table.rendered-preview-table td, .rendered-preview-body table.rendered-preview-table th { border: 1px solid var(--border-default); padding: var(--space-3) var(--space-4); vertical-align: top; } .rendered-preview-body pre { background: var(--surface-secondary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); white-space: pre-wrap; font-size: var(--text-sm); } .rendered-preview-body code { background: var(--surface-secondary); padding: 0 var(--space-2); border-radius: 2px; font-size: 0.95em; } .error-callout { background: var(--flash-error-bg); color: var(--flash-error-text); border: 1px solid var(--flash-error-border); border-radius: var(--card-radius-sm); padding: var(--space-5) var(--space-8); margin: var(--space-5) 0; font-size: var(--text-md); } .error-callout strong { font-weight: 600; } .legacy-notice { background: var(--flash-warning-bg); color: var(--flash-warning-text); border: 1px solid var(--flash-warning-border); border-radius: var(--card-radius-sm); padding: var(--space-4) var(--space-6); margin: var(--space-5) 0; font-size: var(--text-base); } .raw-content { margin-top: var(--space-5); } .raw-content > summary { cursor: pointer; color: var(--text-secondary); font-weight: 500; padding: var(--space-3) 0; font-size: var(--text-base); } .raw-content pre { background: var(--surface-tertiary); border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); padding: var(--space-8); font-family: var(--code-font); font-size: var(--text-base); white-space: pre-wrap; word-break: break-word; margin: var(--space-3) 0; max-height: 28rem; overflow-y: auto; } .reviewer-note-display { margin-top: var(--space-5); padding: var(--space-5) var(--space-8); background: var(--surface-secondary); border-radius: var(--card-radius-sm); font-size: var(--text-md); } .reviewer-note-display .detail-label { display: block; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); } .reviewer-note-display p { margin: 0; color: var(--text-secondary); white-space: pre-wrap; } .review-card { padding: var(--space-10); margin-top: var(--space-10); } .review-card-title { font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--space-3); } .review-card-help { font-size: var(--text-base); color: var(--text-tertiary); margin-bottom: var(--space-8); } .review-form .reviewer-note { width: 100%; padding: var(--space-5) var(--space-6); border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); font-size: var(--text-md); font-family: inherit; background: var(--surface-primary); color: var(--text-primary); margin-bottom: var(--space-8); resize: vertical; } .review-form .reviewer-note:focus { outline: none; border-color: var(--text-link); box-shadow: 0 0 0 3px var(--focus-ring); } .reviewer-note { width: 100%; padding: var(--space-3) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); font-size: var(--text-base); font-family: inherit; background: var(--surface-primary); color: var(--text-primary); margin-bottom: var(--space-3); resize: vertical; box-sizing: border-box; } .reviewer-note:focus { outline: none; border-color: var(--text-link); box-shadow: 0 0 0 3px var(--focus-ring); } /* ── Forms ─────────────────────────────────────────────────── */ .form-group { margin-bottom: var(--space-8); } .form-group label { display: block; font-size: var(--text-md); font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-3); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: var(--space-5) var(--space-6); border: 1px solid var(--border-default); border-radius: var(--button-radius); font-size: var(--text-md); font-family: inherit; background: var(--surface-primary); color: var(--text-primary); transition: border-color var(--ease-default), box-shadow var(--ease-default); } /* Checkboxes / radios should not stretch to 100% — keep the native size. */ .form-group input[type="checkbox"], .form-group input[type="radio"] { width: auto; margin-right: var(--space-4); vertical-align: middle; accent-color: var(--text-primary); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--text-link); box-shadow: 0 0 0 3px var(--focus-ring); } .form-group textarea { resize: vertical; min-height: 5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); } .schedule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } .schedule-grid .form-group { margin-bottom: var(--space-4); } .schedule-grid input, .schedule-grid select { box-sizing: border-box; height: 2.875rem; } .schedule-help { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-8); } /* ── Decision list ─────────────────────────────────────────── */ .decision-category { font-size: var(--text-base); font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-5) 0 var(--space-3); border-bottom: 1px solid var(--border-default); margin-top: var(--space-8); } .decision-category:first-child { margin-top: 0; } .decision-item { display: flex; align-items: flex-start; gap: var(--space-8); padding: var(--space-6) 0; border-bottom: 1px solid var(--border-subtle); } .decision-item:last-child { border-bottom: none; } .decision-body { flex: 1; min-width: 0; } .decision-title { font-weight: 500; font-size: var(--text-lg); color: var(--text-primary); } .decision-content { font-size: var(--text-md); color: var(--text-secondary); margin-top: var(--space-2); } .decision-meta { font-size: var(--text-base); color: var(--text-tertiary); margin-top: var(--space-2); } .decision-actions { display: flex; gap: var(--space-4); flex-shrink: 0; } /* ── Dashboard stat cards ──────────────────────────────────── */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-12); } .stat-card { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--card-radius); padding: var(--space-12) var(--space-12); text-align: left; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow var(--ease-default), border-color var(--ease-default); } .stat-card:hover { box-shadow: var(--card-shadow-hover); text-decoration: none; border-color: var(--text-tertiary); } .stat-value { font-family: var(--brand-font); font-size: var(--text-7xl); font-weight: 300; color: var(--text-primary); letter-spacing: -0.02em; line-height: 1; } .stat-label { font-size: var(--text-sm); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } /* Severity-tinted accent stripe on stat cards. The number stays primary text; only a thin top stripe carries the colour signal so the dashboard reads calmly at a glance instead of as a rainbow of huge numerals. */ .stat-card { position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--stat-accent, transparent); } .stat-card--danger { --stat-accent: var(--status-danger); } .stat-card--warning { --stat-accent: var(--status-warning); } .stat-card--info { --stat-accent: var(--accent); } .stat-card--accent { --stat-accent: var(--purple-500); } .stat-card--success { --stat-accent: var(--status-success); } /* Two-column dashboard body grid; collapses to a single column on tablets. */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); } @media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } } /* ── Dashboard V2 tab bar ──────────────────────────────────── */ .dash-tabs { display: flex; gap: .25rem; margin: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--border-subtle); overflow-x: auto; } .dash-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: .6rem 1rem; font: inherit; font-size: .95rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; border-radius: 6px 6px 0 0; margin-bottom: -1px; transition: color .15s ease, background .15s ease, border-color .15s ease; } .dash-tab:hover { background: var(--surface-secondary); color: var(--text); } .dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dash-tab--active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .dash-panes { touch-action: pan-y; } .dash-pane[hidden] { display: none; } /* ── Dashboard V2 layout primitives ────────────────────────── */ .dash-pane > * + * { margin-top: 1.25rem; } .dash-card { background: var(--surface-primary); border: 1px solid var(--border-subtle); border-radius: var(--card-radius, 10px); padding: 1.25rem; } .dash-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; } .dash-card-head h3, .dash-card-head h4, .dash-card > h3:first-child, .dash-card > h4:first-child { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; } .dash-card-subtle { color: var(--text-muted); font-size: .82rem; } .dash-row { display: grid; gap: 1rem; align-items: stretch; } .dash-row > * { min-width: 0; } .dash-row--2 { grid-template-columns: 1fr 1fr; } .dash-row--3 { grid-template-columns: 1fr 1fr 1fr; } .dash-row--2-1 { grid-template-columns: 2fr 1fr; } @media (max-width: 1100px) { .dash-row--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .dash-row--2, .dash-row--2-1, .dash-row--3 { grid-template-columns: 1fr; } } .dash-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: .75rem; } .dash-chart { position: relative; height: 280px; } .dash-chart--tall { height: 320px; } .dash-status-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; } .dash-status-chip { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-secondary); font-size: .88rem; } .dash-status-chip .dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; } .dash-status-chip .chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-status-chip strong { font-variant-numeric: tabular-nums; } .dash-progress { height: 8px; background: var(--surface-secondary); border-radius: 4px; border: 1px solid var(--border-subtle); overflow: hidden; } .dash-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .35s ease; } .dash-ranked { display: grid; gap: .55rem; min-width: 0; } .dash-ranked-row { font-size: .88rem; min-width: 0; } .dash-ranked-row .row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .25rem; min-width: 0; } /* min-width:0 + flex:1 lets long labels ellipsize instead of overflowing. */ .dash-ranked-row .row-head .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-ranked-row .row-head strong { flex-shrink: 0; font-variant-numeric: tabular-nums; } .dash-ranked-row .row-bar { height: 5px; background: var(--surface-secondary); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-subtle); } .dash-ranked-row .row-bar span { display: block; height: 100%; background: var(--accent); } .dash-health { display: grid; gap: .5rem; } .dash-health-row { display: flex; align-items: center; gap: .9rem; padding: .65rem .85rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-secondary); } .dash-health-row .count { font-size: 1.15rem; font-weight: 600; min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; } .dash-health-row .count.zero { color: var(--text-muted); font-weight: 400; } .dash-health-row .count.alert { color: var(--status-danger); } .dash-health-row .label { flex: 1; font-size: .92rem; } .dash-health-row .denom { color: var(--text-muted); font-size: .8rem; } .dash-meta { color: var(--text-muted); font-size: .85rem; margin-top: -.25rem; margin-bottom: 0; display: grid; gap: .15rem; } .dash-meta a { color: var(--accent); } .dash-meta > div:first-child { font-weight: 500; } .dash-tabbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 1.25rem 0 1.5rem; border-bottom: 1px solid var(--border-subtle); } .dash-tabbar .dash-tabs { margin: 0; border-bottom: 0; flex: 1; min-width: 0; } .dash-tabbar-link { font-size: .85rem; color: var(--accent); text-decoration: none; padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; margin-bottom: .25rem; } .dash-tabbar-link:hover { background: var(--surface-secondary); } .dash-pane-actions { display: flex; justify-content: flex-end; margin-bottom: .5rem; } .dash-pane-link { font-size: .85rem; color: var(--accent); text-decoration: none; padding: .25rem .5rem; border-radius: 6px; } .dash-pane-link:hover { background: var(--surface-secondary); } a.dash-status-chip, a.dash-ranked-row, a.dash-health-row, a.dash-progress-row { text-decoration: none; color: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease; } a.dash-status-chip:hover, a.dash-health-row:hover { border-color: var(--accent); background: var(--surface-tertiary, var(--surface-secondary)); } a.dash-ranked-row:hover .row-bar { box-shadow: 0 0 0 1px var(--accent); } a.dash-ranked-row:hover .label { color: var(--accent); } .dash-progress-list { display: grid; gap: .9rem; } .dash-progress-row { display: block; padding: .25rem .25rem .35rem; border-radius: 6px; margin: -.25rem -.25rem -.35rem; } .dash-progress-row:hover { background: var(--surface-secondary); } .dash-progress-row .row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .3rem; } .dash-progress-row .row-head strong { font-size: .92rem; font-weight: 600; } .dash-progress-row:hover .dash-progress { box-shadow: 0 0 0 1px var(--accent); } .dash-actions-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .dash-actions-feed .action-row { display: block; text-decoration: none; color: inherit; padding: .55rem .75rem; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-secondary); transition: border-color .15s ease, background .15s ease; } .dash-actions-feed .action-row:hover { border-color: var(--accent); background: var(--surface-tertiary, var(--surface-secondary)); } .dash-actions-feed .action-head { display: flex; align-items: center; gap: .5rem; font-size: .85rem; margin-bottom: .25rem; } .dash-actions-feed .action-head .dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; } .dash-actions-feed .action-doc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-actions-feed .action-status { font-size: .75rem; } .dash-actions-feed .action-text { font-size: .85rem; color: var(--text-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Status pipeline ───────────────────────────────────────── */ .pipeline { display: flex; gap: 0; margin: var(--space-8) 0; align-items: flex-start; } .pipeline-step { flex: 1; text-align: center; position: relative; font-size: var(--text-sm); color: var(--text-tertiary); padding-top: var(--space-12); font-weight: 500; } .pipeline-step::before { content: ''; display: block; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--pipeline-track); margin: 0 auto var(--space-3); position: relative; z-index: 1; } .pipeline-step::after { content: ''; position: absolute; top: calc(0.625rem + 4px); left: 0; right: 0; height: 2px; background: var(--pipeline-track); z-index: 0; } .pipeline-step:first-child::after { left: 50%; } .pipeline-step:last-child::after { right: 50%; left: 0; width: 50%; } .pipeline-step.done::before { background: var(--status-success); } .pipeline-step.done::after { background: var(--status-success); } .pipeline-step.active::before { background: var(--text-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); } .pipeline-step.active { color: var(--text-primary); font-weight: 600; } /* ── Section headers with count badges ─────────────────────── */ .section-header { display: flex; align-items: center; gap: var(--space-5); margin: var(--space-12) 0 var(--space-8); } .section-header h3 { font-size: var(--text-2xl); font-weight: 500; } .count-badge { background: var(--surface-secondary); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; padding: 2px var(--space-5); border-radius: var(--radius-full); border: 1px solid var(--border-default); } /* ── Compact cross-ref cards ───────────────────────────────── */ .xref-card { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) var(--space-8); border: 1px solid var(--border-default); border-radius: var(--card-radius-sm); margin-bottom: var(--space-5); font-size: var(--text-md); background: var(--surface-primary); transition: border-color var(--ease-default), box-shadow var(--ease-default); } .xref-card:hover { border-color: var(--text-tertiary); box-shadow: var(--card-shadow-hover); } .xref-card-title { font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xref-card-meta { font-size: var(--text-base); color: var(--text-tertiary); margin-left: var(--space-8); white-space: nowrap; display: flex; gap: var(--space-3); align-items: center; } /* ── Cross-reference badge ─────────────────────────────────── */ .xref-badge { font-size: var(--text-base); color: var(--text-link); background: var(--xref-bg); padding: 2px var(--space-5); border-radius: var(--radius-sm); white-space: nowrap; } .xref-badge:hover { background: var(--xref-hover-bg); text-decoration: none; } /* ── Activity feed ─────────────────────────────────────────── */ .activity-feed { list-style: none; } .activity-feed li { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-5); } .activity-feed li:last-child { border-bottom: none; } .activity-time { color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; font-size: var(--text-base); margin-left: auto; font-variant-numeric: tabular-nums; } .activity-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .activity-desc a { color: var(--text-link); } /* Activity type pills */ .activity-type-pill { display: inline-block; font-size: var(--text-sm); font-weight: 600; padding: 2px var(--space-4); border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; min-width: 4.5rem; text-align: center; } .activity-type-finding { background: var(--red-100); color: var(--red-800); } .activity-type-capa { background: var(--orange-100); color: var(--orange-900); } .activity-type-task { background: var(--blue-100); color: var(--blue-700); } .activity-type-risk { background: var(--amber-100); color: var(--amber-800); } .activity-type-document { background: var(--purple-100); color: var(--purple-700); } .activity-type-decision { background: var(--green-100); color: var(--green-800); } .activity-type-qms { background: var(--purple-100); color: var(--purple-700); } [data-theme="dark"] .activity-type-finding { background: rgba(160, 40, 40, 0.28); color: #fca5a5; } [data-theme="dark"] .activity-type-capa { background: rgba(140, 96, 14, 0.28); color: #fdba74; } [data-theme="dark"] .activity-type-task { background: rgba(61, 127, 255, 0.18); color: #93c5fd; } [data-theme="dark"] .activity-type-risk { background: rgba(140, 96, 14, 0.28); color: #fbbf24; } [data-theme="dark"] .activity-type-document { background: rgba(124, 58, 237, 0.18); color: #c4b5fd; } [data-theme="dark"] .activity-type-decision { background: rgba(46, 107, 74, 0.28); color: #86efac; } [data-theme="dark"] .activity-type-qms { background: rgba(124, 58, 237, 0.22); color: #d8b4fe; } /* ── Pagination ────────────────────────────────────────────── */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-5); margin-top: var(--space-12); } .pagination .page-info { padding: var(--space-3) var(--space-8); font-size: var(--text-md); color: var(--text-tertiary); } /* ── Sort headers ──────────────────────────────────────────── */ .sort-header { cursor: pointer; user-select: none; white-space: nowrap; } .sort-header:hover { color: var(--text-link); } .sort-arrow { font-size: var(--text-sm); margin-left: var(--space-2); } /* ── Risk level colors ─────────────────────────────────────── */ .risk-high { color: var(--status-danger); font-weight: 600; } .risk-medium { color: var(--status-warning); font-weight: 600; } .risk-low { color: var(--status-success); font-weight: 600; } /* ── Inline status select ──────────────────────────────────── */ .status-form { display: inline-flex; align-items: center; gap: var(--space-3); } .status-form select { padding: var(--space-2) var(--space-4); font-size: var(--text-base); border: 1px solid var(--border-default); border-radius: var(--button-radius); background: var(--surface-primary); color: var(--text-primary); } /* ── Empty state ───────────────────────────────────────────── */ .empty { text-align: center; padding: var(--space-24) var(--space-10); color: var(--text-tertiary); } .empty h2 { font-size: var(--text-2xl); margin-bottom: var(--space-5); color: var(--text-secondary); font-family: var(--brand-font); font-weight: 300; } /* ── Alert banner (dashboard) ──────────────────────────────── */ .alert-banner { padding: var(--space-6) var(--space-10); border-radius: var(--card-radius); margin-bottom: var(--space-10); font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-5); } .alert-banner-warning { background: var(--alert-bg); color: var(--alert-text); border: 1px solid var(--alert-border); } .alert-banner a { color: inherit; font-weight: 600; text-decoration: underline; } /* ── Qualification progress ───────────────────────────────── */ .qual-progress-bar { background: var(--surface-secondary); border-radius: var(--radius-full); height: var(--space-4); overflow: hidden; } .qual-progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--status-warning); transition: width 0.3s; } .qual-progress-mid { background: var(--text-link); } .qual-progress-complete { background: var(--status-success); } .qual-step-card { transition: border-color var(--ease-default); } .qual-step-done { opacity: 0.7; } .qual-step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--surface-secondary); font-size: var(--text-sm); font-weight: 600; color: var(--text-tertiary); flex-shrink: 0; } .qual-step-done .qual-step-number { background: var(--green-100); color: var(--green-800); } /* ── Breadcrumbs ───────────────────────────────────────────── */ .breadcrumbs { font-size: var(--text-base); color: var(--text-tertiary); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .breadcrumbs a { color: var(--text-secondary); text-decoration: none; } .breadcrumbs a:hover { color: var(--text-link); text-decoration: underline; } .breadcrumb-sep { color: var(--text-tertiary); } .breadcrumb-current { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; } /* ── Finding cards (list) ──────────────────────────────────── */ .finding-card-desc { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-5); line-height: 1.55; } .finding-card-assignment { margin-top: var(--space-5); font-size: var(--text-base); color: var(--text-secondary); } .unassigned-chip { display: inline-block; padding: 2px var(--space-5); border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-tertiary); font-weight: 500; font-size: var(--text-base); } /* ── Awaiting-triage sub-header ────────────────────────────── */ .filter-sub { font-size: var(--text-md); color: var(--text-secondary); margin: calc(-1 * var(--space-5)) 0 var(--space-10); display: flex; align-items: center; gap: var(--space-4); } .filter-sub a { color: var(--text-link); } .filter-sub .dot { color: var(--text-tertiary); } /* ── Finding detail: description / edit form ──────────────── */ .finding-description { font-size: var(--text-md); color: var(--text-primary); white-space: pre-wrap; line-height: 1.6; margin-bottom: var(--space-3); } .finding-edit-form { display: flex; flex-direction: column; gap: var(--space-8); } .finding-edit-form .form-group { margin-bottom: 0; } /* ── Triage callout (OPEN / IN_REVIEW) ─────────────────────── */ .triage-callout { background: var(--alert-bg); border: 1px solid var(--alert-border); color: var(--alert-text); border-radius: var(--card-radius); padding: var(--space-10) var(--space-12); margin-bottom: var(--space-10); } .triage-callout-header { font-weight: 700; margin-bottom: var(--space-4); font-size: var(--text-xl); } .triage-callout-body { font-size: var(--text-md); line-height: 1.55; margin-bottom: var(--space-5); color: inherit; } .triage-callout-meta { font-size: var(--text-base); margin-bottom: var(--space-8); } .triage-callout-meta a { color: inherit; text-decoration: underline; } .triage-actions { display: flex; gap: var(--space-5); flex-wrap: wrap; } /* ── Accept / Dismiss confirmation panels ──────────────────── */ .accept-panel, .dismiss-panel { background: var(--surface-primary); border: 1px solid var(--border-default); border-radius: var(--card-radius); padding: var(--space-10) var(--space-12); margin-bottom: var(--space-10); } .accept-panel h3, .dismiss-panel h3 { font-size: var(--text-xl); font-weight: 500; margin-bottom: var(--space-5); } .accept-explain, .dismiss-explain { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--space-5); line-height: 1.5; } .accept-effects { margin: var(--space-3) 0 var(--space-8) var(--space-12); font-size: var(--text-md); color: var(--text-secondary); } .accept-effects li { margin-bottom: var(--space-2); } .dismiss-attribution { font-size: var(--text-base); color: var(--text-tertiary); } /* ── Dismissed banner ──────────────────────────────────────── */ .dismissed-banner { background: var(--flash-warning-bg); color: var(--flash-warning-text); border: 1px solid var(--flash-warning-border); border-radius: var(--card-radius); padding: var(--space-8) var(--space-10); margin-bottom: var(--space-10); } .dismissed-title { font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-3); } .dismissed-body { font-size: var(--text-md); line-height: 1.5; } .dismissed-meta { font-size: var(--text-base); margin-top: var(--space-3); opacity: 0.85; } /* ── Remediation / Closed state panels ─────────────────────── */ .remediation-panel { background: var(--flash-info-bg); color: var(--flash-info-text); border: 1px solid var(--flash-info-border); border-radius: var(--card-radius); padding: var(--space-8) var(--space-10); margin-bottom: var(--space-10); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-8); } .remediation-state { font-size: var(--text-md); line-height: 1.55; } .remediation-actions { display: flex; gap: var(--space-5); flex-wrap: wrap; } .closed-panel { background: var(--surface-secondary); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--card-radius); padding: var(--space-8) var(--space-10); margin-bottom: var(--space-10); font-size: var(--text-md); } /* ── Not-yet-applicable panel ──────────────────────────────── */ .not-yet-applicable { border-style: dashed; } .not-yet-applicable p { font-size: var(--text-md); color: var(--text-secondary); line-height: 1.55; } /* ── Assignment form ───────────────────────────────────────── */ .assign-form { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .assign-form label { font-size: var(--text-md); font-weight: 500; white-space: nowrap; } .assign-form select { flex: 1; min-width: 14rem; padding: var(--space-3) var(--space-5); border: 1px solid var(--border-default); border-radius: var(--button-radius); background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-md); } /* Vendor qualification template-preview blocks. Hidden by default so only the one matching the current