/* perf-extras.css — KC Performance KCDS overrides + layout helpers. PER-784. * * Loads AFTER @kc/k2 kcds.css so these rules win the cascade. * * The BRAND IS NOT SET HERE. KC Performance indigo comes from * in k2.html, which kcds.css maps to * the indigo ramp (#4F46E5 …) natively in both light and dark. Do NOT redeclare * --kcds-color-primary here — keep the single source of truth declarative. * * Use this file ONLY for: * 1. KC-Performance-specific KCDS token tweaks (rare), and * 2. layout/utility classes K2 has no component for (the AntD Row/Col/Space * replacements land here as flex/grid utilities, per the port checklist). */ /* Base page reset so the static app fills the viewport (no Vite/React reset). */ html, body { margin: 0; padding: 0; min-height: 100%; background: var(--kcds-color-surface-canvas, #fff); color: var(--kcds-color-text-primary, #1f2937); font-family: var(--kcds-font-family, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); } /* The router renders pages into this container inside the shell. */ .perf-outlet { display: block; min-height: 0; } /* Layout utilities (AntD Space/Row/Col replacements). Extend as clusters need. */ .perf-row { display: flex; gap: var(--kcds-spacing-16, 16px); } .perf-col { display: flex; flex-direction: column; gap: var(--kcds-spacing-12, 12px); } .perf-stack { display: flex; flex-direction: column; gap: var(--kcds-spacing-8, 8px); } /* ──────────────────────────────────────────────────────────────────────────── * App shell — composed of + + * SDK components (PER-774 trial). The custom .perf-shell flex layout from the * round-1 port is GONE; the SDK now owns grid / scroll / collapsing-region * behavior. What lives here: * - bg/border overrides (LMS-Admin rule: white sidebar) * - .perf-brand block slotted into k2-app-sidebar's `brand-head` slot * - .perf-nav (still styled here — k2 doesn't ship a nav list component) * - .perf-header right-side controls slotted into k2-app-header's `end` slot * * Colors keep the kcds.css perform indigo. Density flips to compact via * set in k2.html — k2 components react * to that via :host-context. */ perf-app-shell { display: block; height: 100vh; } /* LMS-Admin sidebar rule: white #FFFFFF, never tinted. */ .perf-sidebar { background: #ffffff; border-inline-end: 1px solid var(--kcds-color-border-subtle, #e5e7eb); } [data-kcds-theme='dark'] .perf-sidebar { background: var(--kcds-color-surface-canvas, #0b1220); border-color: var(--kcds-color-border-subtle, #1f2937); } /* PER-815 — the PER-800 dark-theme override on k2-button[variant="default"] * was a workaround for a non-existent SDK variant. js-kc-k2/src/k2ui.js * defines only primary / neutral / tertiary / success / warning / danger * variants — `default` falls through to base button styles, which on dark * theme leaves the button transparent. Switching every caller to * `variant="neutral"` (KCDS canonical quiet button) lets the SDK style the * correct dark-theme contrast natively, so this override is gone. */ .perf-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 0; color: var(--kcds-color-text-primary, #1f2937); } .perf-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .perf-brand-line1 { font-size: 14px; font-weight: 700; } .perf-brand-line2 { font-size: 12px; font-weight: 700; color: var(--kcds-color-primary, #4f46e5); } .perf-nav { display: flex; flex-direction: column; gap: 2px; } .perf-nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--kcds-color-text-secondary, #6b7280); padding: 12px 8px 4px; } .perf-nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 36px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--kcds-color-text-primary, #1f2937); text-decoration: none; transition: background 120ms ease, color 120ms ease; } .perf-nav-item:hover { background: var(--kcds-color-surface-canvas, rgba(79, 70, 229, 0.06)); color: var(--kcds-color-text-primary, #1f2937); } .perf-nav-item.is-active { background: var(--kcds-color-primary-tint, rgba(79, 70, 229, 0.12)); /* KCDS active text is on-primary-tint, but this CDN build resolves it to a light indigo (#A5B4FC) that fails contrast on the pale tint; primary reads correctly and is on-brand, so keep it. Weight is 700 (KCDS uses only 400/700). */ color: var(--kcds-color-primary, #4f46e5); font-weight: 700; } /* Active-item accent bar at the inline-start edge (redesign mockup). */ .perf-nav-item.is-active::before { content: ''; position: absolute; inset-inline-start: 0; top: 6px; bottom: 6px; width: 3px; background: var(--kcds-color-primary, #4f46e5); border-start-end-radius: 3px; border-end-end-radius: 3px; } .perf-nav-icon { display: inline-flex; width: 18px; justify-content: center; flex-shrink: 0; } .perf-nav-label { flex: 1; overflow: hidden; /* PER-804 — wrap to 2 lines for languages whose strings overflow the rail * (Spanish "Escalas de calificación" is the canonical too-long case). The * line-clamp shape is the standard 4-property block ellipsis pattern. */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } :lang(en) .perf-nav-label, :lang(ar) .perf-nav-label { display: block; text-overflow: ellipsis; white-space: nowrap; } .perf-nav-empty { padding: 12px 10px; font-size: 13px; color: var(--kcds-color-text-tertiary, #9ca3af); } /* own its 46-56px row. We only style the controls we slot * into its `end` slot. */ .perf-header { --k2-app-header-height: 46px; } .perf-header-actions { display: flex; align-items: center; gap: 8px; padding-inline-end: 16px; } .perf-iconbtn { appearance: none; border: 0; background: transparent; color: var(--kcds-color-text-secondary, #4b5563); width: 32px; height: 32px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .perf-iconbtn:hover { background: var(--kcds-color-surface-canvas, rgba(0, 0, 0, 0.06)); color: var(--kcds-color-text-primary, #1f2937); } .perf-lang { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; color: var(--kcds-color-text-secondary, #4b5563); } .perf-lang:hover { background: var(--kcds-color-surface-canvas, rgba(0, 0, 0, 0.06)); } .perf-lang-select { appearance: none; border: 0; background: transparent; /* Theme-adaptive so the control text and the native option popup are readable in dark mode (was `inherit`, which left light text on the browser's default light popup). */ color: var(--kcds-color-text-primary, #1f2937); font: inherit; cursor: pointer; padding-inline-end: 4px; } .perf-lang-select option { background: var(--kcds-color-surface-elevated, #fff); color: var(--kcds-color-text-primary, #1f2937); } .perf-lang-icon { display: inline-flex; } .perf-user { display: inline-flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--kcds-color-surface-subtle, #f3f4f6); color: var(--kcds-color-text-primary, #1f2937); } [data-kcds-theme='dark'] .perf-user { background: var(--kcds-color-surface-subtle, #1f2937); } .perf-user-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--kcds-color-primary, #4f46e5); color: var(--kcds-color-on-primary, #fff); font-size: 12px; font-weight: 600; } .perf-user-name { font-size: 13px; font-weight: 600; } .perf-logout { appearance: none; background: transparent; border: 0; color: var(--kcds-color-text-secondary, #6b7280); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 4px; } .perf-logout:hover { color: var(--kcds-color-primary, #4f46e5); } /* Router target — fills the content slot. */ .perf-outlet-host { display: block; min-width: 0; min-height: 0; padding: 20px 24px; background: var(--kcds-color-surface-subtle, #f3f7f9); /* Establish a positioning context for the routed page. k2-data-table renders * a visually-hidden `position:absolute` screen-reader live-region (.dt__sr) * that has NO positioned ancestor inside the SDK shadow tree — so without * this it resolves its containing block to the initial containing block * () and anchors at its flow position, inflating documentElement's * scrollHeight past the viewport. That produced a second (document-level) * scrollbar and a tall band of empty space below the app shell, because the * shell's own [part=content] region can only clip normal-flow descendants, * not an absolute element anchored to the ICB. Making the outlet host a * containing block pulls those SR regions back inside the scrollable content * region, where they are clipped like everything else. */ position: relative; } /* ──────────────────────────────────────────────────────────────────────────── * Cluster 10 — employee dashboard (design-parity layout, PER-843). * The dashboard mockup's `.row-2col` is an asymmetric grid (main + fixed * 360px rail) that can't express (it only does equal / auto-fit * columns), so the layout lives here as a tokenised class — same template the * mockup uses. Everything else on the page is real K2 components. * ──────────────────────────────────────────────────────────────────────────*/ .dash-2col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--k2-space-24, 24px); align-items: start; } @media (max-width: 1200px) { .dash-2col { grid-template-columns: minmax(0, 1fr); } } .dash-main, .dash-rail { display: flex; flex-direction: column; gap: var(--k2-space-24, 24px); min-width: 0; } .dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k2-space-16, 16px); width: 100%; } .dash-panel-title { margin: 0; font-size: var(--k2-font-size-lg, 18px); font-weight: 600; color: var(--k2-color-text-primary); } .dash-panel-sub { margin-top: 2px; font-size: var(--k2-font-size-sm, 14px); color: var(--k2-color-text-secondary); } /* Row primary cell — leading icon bubble + title/meta (reviews, training). */ .dash-cellprimary { display: flex; align-items: center; gap: var(--k2-space-12, 12px); } .dash-cellprimary__ico { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--k2-radius-8, 8px); background: var(--k2-color-surface-subtle, #f3f7f9); color: var(--k2-color-text-tertiary, #74838a); } .dash-cellprimary__ico k2-icon { --k2-icon-size: 16px; } .dash-cellprimary__title { font-weight: 600; color: var(--k2-color-text-primary); } .dash-cellprimary__meta { font-size: var(--k2-font-size-sm, 14px); color: var(--k2-color-text-secondary); } /* Goal-completion ring block in the rail. */ .dash-goal { display: flex; flex-direction: column; align-items: center; gap: var(--k2-space-20, 20px); padding: var(--k2-space-8, 8px) 0; } .dash-goalstats { display: flex; width: 100%; justify-content: space-around; text-align: center; } .dash-goalstats__n { font-size: var(--k2-font-size-xl, 24px); font-weight: 700; color: var(--k2-color-text-primary); } .dash-goalstats__l { font-size: var(--k2-font-size-sm, 14px); color: var(--k2-color-text-secondary); } /* Card-header rows that carry an icon + title (goals / AI insight). */ .dash-ai-head { display: flex; align-items: center; gap: var(--k2-space-8, 8px); width: 100%; } .dash-ai-title { font-size: var(--k2-font-size-lg, 18px); font-weight: 600; color: var(--k2-color-text-primary); } /* PER-795 — focused (public) shell variant. Vertically + horizontally center * the page contents (login card etc.). `display: grid` with place-items keeps * the card's own width intact (login card uses max-width:420px). Min-height * ensures vertical centering even on a short login surface. * * PER-808 — `box-sizing: border-box` makes the explicit 24px padding part * of the `min-height: 100%` computation instead of stacking on top. With * the default `content-box`, this outlet's intrinsic block-size was * `100% + 48px` (top+bottom padding) relative to the K2 shell main area, * pushing the bottom edge ~48px past the viewport. The browser then * painted an empty scrollbar gutter (visible as up/down arrows on the * page edge in RTL where the gutter flips left) even though no content * was actually scrollable. `border-box` collapses padding into the * min-height envelope. */ .perf-outlet-host--centered { box-sizing: border-box; display: grid; place-items: center; min-height: 100%; padding: 24px; } .perf-outlet-host--centered .perf-outlet { width: 100%; } .perf-header-brand { display: flex; align-items: center; padding-inline-start: 16px; } /* PER-798 — mobile shell. * * Desktop: hamburger hidden, k2-app-sidebar visible. * *
…title…
…
*
…
*
…
* */ k2-page { display: block; /* K2 SDK defaults --k2-page-max-width to 1320px (js-kc-k2/src/k2ui.js * ~L21000), which leaves a wide empty gutter on 1920px+ monitors after * the 210px sidebar + 24px gap. KC Performance admin pages render * dense table data; let them use the full content region instead. */ --k2-page-max-width: 100%; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; } .page-head h1 { margin: 0 0 4px; /* PER-799 / KCDS admin H1: floor 24px (compact density), scale to 28px on * wider viewports. clamp() avoids a media-query without breaking compact. */ font-size: clamp(24px, 2.2vw, 28px); font-weight: 700; } .page-head .muted { margin: 0; color: var(--kcds-color-text-secondary, #6b7280); font-size: 13px; max-width: 720px; } .page-head .actions { display: inline-flex; gap: 8px; align-items: center; } /* PER-810 — pageheader overflow menu. Save + Cancel stay as visible * k2-buttons; Preview / History / Delete collapse into a kebab dropdown * (KCDS Archetype 5 pageheader rule: ≤2 visible actions + overflow). */ .page-head .ph-kebab { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--kcds-color-border-default, #e2e8f0); border-radius: 4px; color: var(--kcds-color-text-secondary, #4b5563); font-size: 18px; line-height: 1; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .page-head .ph-kebab:hover { background: var(--kcds-color-surface-canvas, rgba(79, 70, 229, 0.06)); color: var(--kcds-color-text-primary, #1f2937); border-color: var(--kcds-color-primary, #4f46e5); } .page-head .ph-kebab:focus-visible { outline: 2px solid var(--kcds-color-primary, #4f46e5); outline-offset: 2px; } .page-head .ph-menu-item { display: flex; align-items: center; width: 100%; padding: 8px 14px; background: transparent; border: 0; font: inherit; font-size: 14px; color: var(--kcds-color-text-primary, #1f2937); text-align: start; cursor: pointer; } .page-head .ph-menu-item:hover:not(:disabled) { background: var(--kcds-color-surface-canvas, rgba(79, 70, 229, 0.06)); } .page-head .ph-menu-item:disabled { opacity: 0.5; cursor: not-allowed; } .page-head .ph-menu-item.ph-menu-danger { color: var(--kcds-color-status-error, #b91c1c); } .page-head .ph-menu-item.ph-menu-danger:hover:not(:disabled) { background: var(--kcds-color-status-error-bg, rgba(220, 38, 38, 0.08)); } .page-head .ph-menu-sep { height: 1px; margin: 4px 0; background: var(--kcds-color-border-default, #e2e8f0); } /* PER-816 — preview-modal skeleton. Animated shimmer reproduces a * section-heading + two body lines silhouette while the role-filtered * preview snapshot loads. Respects prefers-reduced-motion. */ .preview-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px; } .skeleton-bar { height: 12px; border-radius: 4px; background: linear-gradient( 90deg, var(--kcds-color-surface-subtle, #f1f5f9) 0%, var(--kcds-color-surface-canvas, #e2e8f0) 50%, var(--kcds-color-surface-subtle, #f1f5f9) 100% ); background-size: 200% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite; } .skeleton-bar--h2 { height: 18px; width: 40%; margin-bottom: 4px; } .skeleton-bar--body { height: 12px; width: 100%; } .skeleton-bar--80 { width: 80%; } .skeleton-bar--60 { width: 60%; } @keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } } .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .toolbar k2-input { flex: 1; max-width: 400px; } .muted { color: var(--kcds-color-text-secondary, #6b7280); } .muted.small { font-size: 12px; } .center { display: flex; align-items: center; justify-content: center; padding: 48px 0; } .err { color: var(--kcds-color-status-error, #ef4444); font-size: 12px; margin: 4px 0 0; } .card { background: var(--kcds-color-surface-canvas, #fff); border: 1px solid var(--kcds-color-border-subtle, #e5e7eb); border-radius: 12px; padding: 16px; margin-bottom: 16px; } [data-kcds-theme='dark'] .card { background: var(--kcds-color-surface-elevated, #111827); border-color: var(--kcds-color-border-subtle, #1f2937); } /* Cap a single-column form body to a readable measure on wide viewports (redesign mockup .form-column). Stays inline-start aligned. */ .form-column { max-width: 720px; } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .field label { font-size: 12px; font-weight: 600; color: var(--kcds-color-text-secondary, #4b5563); } /* Native /