/* ============================================================ COLOR SYSTEM (LIGHT + DARK) ============================================================ */ :root { /* Surfaces / backgrounds */ --color-bg: #f5f5f4; --color-surface: #ffffff; --color-surface-soft: #f9fafb; /* Text */ --color-text: #111827; --color-text-muted: #6b7280; /* Borders */ --color-border-subtle: #d1d5db; /* Brand */ --color-brand: #facc15; --color-brand-hover: #eab308; /* NEW – accents */ --color-accent-sunshine: #facc15; /* yellow */ --color-accent-midnight: #38bdf8; /* cyan */ --color-accent-midnight-soft: rgba(56, 189, 248, .45); --color-accent-midnight-border: rgba(56, 189, 248, .35); /* Shell */ --color-topbar-bg: #facc15; --color-sidebar-bg: #e5e7eb; --color-sidebar-active: #facc15; /* Banner (info / onboarding) */ --color-banner-bg: #fef3c7; --color-banner-text: #92400e; /* Inputs */ --color-input-bg: #f9fafb; --color-input-border: #d1d5db; /* States */ --color-error: #b91c1c; --color-success: #16a34a; } /* Dark theme overrides – activated by adding `theme-dark` on */ body.app-shell.theme-dark { --color-bg: #020617; /* slate-950 vibe */ --color-surface: #020819; --color-surface-soft: #020819; --color-text: #f9fafb; --color-text-muted: #9ca3af; --color-border-subtle: #1f2937; --color-brand: #facc15; --color-brand-hover: #eab308; --color-topbar-bg: #020c2b; --color-sidebar-bg: #020617; --color-sidebar-active: #facc15; --color-banner-bg: #451a03; --color-banner-text: #fed7aa; --color-input-bg: #020617; --color-input-border: #374151; } /* DARK MODE OVERRIDES – only when theme-dark is active */ body.app-shell.theme-dark .card { background: var(--color-surface); /* use the lighter card surface */ box-shadow: 0 14px 28px rgba(15, 23, 42, 0.75), /* main soft drop shadow */ 0 0 10px rgba(56, 189, 248, 0.20); /* very subtle blue glow */ border: 1px solid rgba(148, 163, 184, 0.40); } body.app-shell.theme-dark .sidebar { box-shadow: 0 0 30px var(--color-accent-midnight-soft); border-right: 1px solid var(--color-accent-midnight-border); } /* DARK MODE – force labels + helper copy to readable colors */ body.app-shell.theme-dark .card label { color: var(--color-text); /* strong white-ish */ } body.app-shell.theme-dark .subtitle, body.app-shell.theme-dark .settings-card-subtitle, body.app-shell.theme-dark .settings-helper-text { color: var(--color-text-muted); /* softer gray, still readable */ } /* ============================================================ GLOBAL BASE STYLES ============================================================ */ * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--color-bg); color: var(--color-text); } /* Smooth cross-fade when switching Sunshine <-> Midnight */ body, body.app-shell, .topbar, .sidebar, .card, .table-wrapper, .skills-card, .qa-section-card, .qa-table-container, .agent-card, .login-card { transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } /* Small count badges (Active Users / Deactivated Users) */ .badge { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; line-height: 1; } /* ============================================================ LOGIN PAGE ============================================================ */ .login-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* Light login card matching Talynto theme */ .login-card { background: #fefefe; padding: 24px 28px; border-radius: 24px; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25); width: 360px; box-sizing: border-box; } /* Logo + tagline */ .login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; } .logo { height: 60px; width: auto; } .login-tagline { font-size: 0.85rem; color: #6b7280; } /* Inputs and labels */ .login-card label { display: block; margin-bottom: 10px; font-size: 0.85rem; color: #374151; } .login-card input { width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 10px; border: 1px solid #d4d4d8; font-size: 0.9rem; box-sizing: border-box; resize: vertical; min-height: 48px; } /* Yellow Talynto button */ .btn-primary { margin-top: 8px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--color-brand); color: var(--color-text); /* stays dark-on-yellow even in dark mode */ font-weight: 600; cursor: pointer; font-size: 0.9rem; width: 100%; } .btn-primary:hover { background: var(--color-brand-hover); } /* Secondary pill-style button (used in Dispute & Notes) */ .btn-secondary { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-border-subtle); background: #f9fafb; color: #111827; font-size: 0.8rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; } .btn-secondary:hover { background: #f3f4f6; border-color: #9ca3af; } /* Midnight (dark) theme variant */ body.app-shell.theme-dark .btn-secondary { background: #020617; border-color: #1f2937; color: var(--color-text); } body.app-shell.theme-dark .btn-secondary:hover { background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.7); } /* Error message under form */ .error { margin-top: 8px; font-size: 0.8rem; color: #b91c1c; } .forgot-password { text-align: right; margin-top: 4px; margin-bottom: 8px; font-size: 0.85rem; } .forgot-password a { color: #333; text-decoration: underline; cursor: pointer; } .forgot-password a:hover { opacity: 0.7; } #loginBgCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } /* Login only (non app-shell pages) */ body:not(.app-shell) { overflow: hidden; background: #f5f5f4; } /* App pages should scroll normally */ body.app-shell { overflow-y: auto; } .login-wrapper { position: relative; z-index: 1; background: transparent; /* IMPORTANT: don’t cover the canvas */ } .login-card { position: relative; z-index: 2; } /* ============================================================ APP SHELL (TOPBAR, SIDEBAR, CONTENT) ============================================================ */ body.app-shell { background: var(--color-bg); } /* Top yellow bar */ .topbar { position: relative; /* ⬅️ add this */ display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--color-topbar-bg); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.12); } .topbar-user-link { color: inherit; text-decoration: none; padding: 6px 10px; border-radius: 999px; cursor: pointer; } .topbar-user-link:hover { background: rgba(148, 163, 184, 0.12); } /* Midnight-specific polish */ body.app-shell.theme-dark .topbar { /* keep using the token so it stays in sync */ background: var(--color-topbar-bg); /* subtle cyan line so it reads as a “bar” */ border-bottom: 1px solid var(--color-accent-midnight-border); /* soft upward glow, echoing the sidebar */ box-shadow: 0 10px 30px rgba(15, 23, 42, 0.9), 0 0 18px var(--color-accent-midnight-soft); } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-tagline { font-size: 0.9rem; font-weight: 500; } .topbar-right { display: flex; align-items: center; gap: 12px; } /* ========================= Notifications (Topbar Bell) ========================= */ .notif-wrap { position: relative; display: inline-flex; align-items: center; } .notif-bell-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--color-border-subtle); background: transparent; color: var(--color-text); cursor: pointer; transition: transform 120ms ease, background 120ms ease, border-color 120ms ease; } .notif-bell-btn:hover { background: var(--color-surface-soft); } .notif-bell-btn:active { transform: scale(0.98); } .notif-bell-icon { width: 18px; height: 18px; fill: currentColor; } .notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #ffffff; font-size: 0.72rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,0.25); } .notif-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 420px; max-width: calc(100vw - 24px); border-radius: 16px; border: 1px solid var(--color-border-subtle); background: var(--color-surface); box-shadow: 0 18px 40px rgba(0,0,0,0.18); overflow: hidden; z-index: 999; } body.app-shell.theme-dark .notif-dropdown { box-shadow: 0 18px 44px rgba(2, 6, 23, 0.72), 0 0 18px var(--color-accent-midnight-soft); } .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; border-bottom: 1px solid var(--color-border-subtle); } .notif-dropdown-title { font-weight: 700; font-size: 0.95rem; color: var(--color-text); } .notif-markall-btn { border: 1px solid var(--color-border-subtle); background: transparent; color: var(--color-text); border-radius: 10px; padding: 7px 10px; font-size: 0.82rem; cursor: pointer; } .notif-markall-btn:hover { background: var(--color-surface-soft); } .notif-list { max-height: 360px; overflow: auto; } .notif-row { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 12px 12px; border-bottom: 1px solid var(--color-border-subtle); } .notif-row:last-child { border-bottom: 0; } .notif-row:hover { background: var(--color-surface-soft); } .notif-row.is-unread .notif-row-title::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 999px; background: #ef4444; vertical-align: middle; } .notif-row-title { color: var(--color-text); font-size: 0.9rem; line-height: 1.2; margin-bottom: 4px; } .notif-row-time { color: var(--color-text-muted); font-size: 0.78rem; } .notif-empty { padding: 14px 12px; color: var(--color-text-muted); font-size: 0.86rem; } .topbar-user { font-size: 0.85rem; } /* Ghost log-out button */ .btn-ghost { padding: 6px 14px; border-radius: 999px; border: 1px solid #111827; background: transparent; cursor: pointer; font-size: 0.85rem; white-space: nowrap; } /* DARK – make it clearly tappable */ body.app-shell.theme-dark .btn-ghost { border-color: #facc15; /* brand yellow outline */ color: #facc15; /* yellow text */ background: transparent; } body.app-shell.theme-dark .btn-ghost:hover { background: rgba(250, 204, 21, 0.12); /* soft yellow hover */ } /* Main layout: sidebar + content */ .layout { display: flex; min-height: calc(100vh - 56px); /* ~topbar height */ } /* Midnight: very soft dim just *under* the top bar */ body.app-shell.theme-dark .topbar::after { content: ""; position: absolute; /* Start exactly at the bottom edge of the bar */ top: 100%; left: 0; right: 0; /* How far down the dimming goes */ height: 56px; pointer-events: none; z-index: 0; /* Much lighter gradient, and only below the bar */ background: linear-gradient( to bottom, rgba(15, 23, 42, 0.35), /* gentle dark tint */ rgba(15, 23, 42, 0.0) ); } /* Midnight theme: make count badges readable + on-brand */ body.app-shell.theme-dark .badge { background: rgba(56, 189, 248, 0.22) !important; /* soft cyan pill */ color: #e5f2ff; /* light text */ border: 1px solid rgba(56, 189, 248, 0.5); } /* Sidebar */ .sidebar { width: 230px; background: var(--color-sidebar-bg); padding: 16px; border-right: 1px solid var(--color-border-subtle); box-shadow: 3px 0 20px rgba(0, 0, 0, 0.55); display: flex; /* NEW */ flex-direction: column; /* NEW */ justify-content: space-between;/* NEW: pushes footer to bottom */ } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar-main { flex: 1; } .sidebar-item { font-size: 0.9rem; padding: 8px 12px; border-radius: 999px; margin-bottom: 4px; cursor: pointer; color: var(--color-text-muted); } .sidebar-item:hover { background: rgba(148, 163, 184, 0.15); color: var(--color-text); } .sidebar-item a { color: inherit; text-decoration: none; } /* Active nav item (yellow pill) */ .sidebar-item-active, .sidebar-item.active { background: var(--color-sidebar-active); font-weight: 600; color: #111827; /* keep text dark on yellow */ } /* Ensure the link text also switches to dark on yellow */ .sidebar-item-active a, .sidebar-item.active a, .sidebar-link.active { color: #111827; } .sidebar-footer { margin-top: auto; /* push it to the bottom of the flex column */ padding: 12px 24px 16px; border-top: 1px solid var(--color-border-subtle); position: sticky; bottom: 0; background: var(--color-sidebar-bg); /* so it doesn't show content behind */ } /* Content area */ .content { flex: 1; padding: 24px; } /* GLOBAL — Align page title with sidebar width */ .header-title { margin-left: 10px; /* equals sidebar width */ font-size: 1rem; font-weight: 600; } /* ========================= Sidebar theme illustration ========================= */ .theme-illustration { padding: 0px 0px 0px 0px; } .theme-illustration-inner { position: relative; /* Make the pill slightly wider than the sidebar */ width: 225%; margin-left: -60%; /* pull it left so it fills the column */ margin-right: 0; padding-top: 100%; /* controls height – tweak 60–80% to taste */ border-radius: 10px; overflow: hidden; } .theme-illustration-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10; opacity: 0; transition: opacity 240ms ease, transform 240ms ease; } /* Default (Sunshine) – show day, hide night */ body.app-shell .theme-illustration-sunshine { opacity: 1; } body.app-shell .theme-illustration-midnight { opacity: 0; } /* Midnight – fade to night illustration */ body.app-shell.theme-dark .theme-illustration-sunshine { opacity: 0; } body.app-shell.theme-dark .theme-illustration-midnight { opacity: 1; } /* ============================================================ GENERIC CARD + FORM ELEMENTS ============================================================ */ /* Full-width responsive dashboard cards */ .card { width: 100%; margin: 24px 0; background: var(--color-surface); border-radius: 24px; padding: 24px 28px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); border: 1px solid var(--color-border-subtle); max-width: none; } /* On ultra-wide screens, maintain readable spacing */ @media (min-width: 1800px) { .card { padding-left: 40px; padding-right: 40px; } } /* On smaller screens, keep it clean */ @media (max-width: 900px) { .card { padding: 20px 20px; border-radius: 18px; } } .card h1 { margin-top: 0; } .subtitle { font-size: 0.9rem; color: var(--color-text-muted); } .card label { display: block; font-size: 0.9rem; font-weight: 600; color: #111827; margin-bottom: 4px; } /* Make inputs, textareas, and selects look the same */ .card input[type="text"], .card input[type="email"], .card input[type="password"], .card input[type="number"], .card input[type="time"], .card textarea, .card select { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--color-input-border); background: var(--color-input-bg); font-size: 0.9rem; box-sizing: border-box; color: var(--color-text); } .card select { min-height: 40px; } .helper-text { margin-top: 4px; font-size: 0.75rem; color: var(--color-text-muted); } /* LOB pill container + pill styles */ .lob-pill-container { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; min-height: 38px; } .lob-pill { padding: 6px 12px; border-radius: 999px; border: 1px solid #d1d5db; background: #f9fafb; font-size: 0.8rem; cursor: pointer; user-select: none; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .lob-pill:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .lob-pill.lob-pill-selected { background: #facc15; /* your yellow brand tone */ border-color: #eab308; box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.5); } /* ============================================================ SKILLS BUILDER ============================================================ */ .skills-card { max-width: 960px; margin: 32px auto; padding: 24px 32px; background: #ffffff; border-radius: 18px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } /* Top “Add New Skill” form */ .skills-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } /* Two-column layout specifically for Pass & Fail */ .skills-form-row { display: grid; grid-template-columns: 1fr 1fr; /* Pass | Fail */ gap: 16px; } /* Two-column layout for Channel | Status in QA Rubric Builder */ .rubric-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .rubric-form-row { grid-template-columns: 1fr; } } /* Labels + inputs */ .skills-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; font-weight: 600; color: #111827; } /* QA Evaluation form layout – desktop rows */ .eval-form-row { display: grid; grid-template-columns: 1fr 1fr; /* equal width left/right */ gap: 16px; } .eval-form-row-compact { display: grid; grid-template-columns: 0.4fr 1.6fr; /* smaller date, wider comments */ gap: 16px; } /* In case the window ever gets narrow, stack them gracefully */ @media (max-width: 900px) { .eval-form-row, .eval-form-row-compact { grid-template-columns: 1fr; } } /* Inputs & textarea in the form */ .skills-form input, .skills-form textarea { border-radius: 10px; border: 1px solid #d1d5db; padding: 8px 10px; font-size: 0.9rem; font-weight: 400; color: #111827; background: #f9fafb; box-sizing: border-box; } /* Textarea: same look but not fully pill-shaped */ .skills-form textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #d1d5db; background-color: #f9fafb; font-size: 0.9rem; outline: none; resize: vertical; min-height: 56px; } /* Header: “Skills List” + search box */ .skills-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; margin-bottom: 8px; } .skills-header h2 { margin: 0; font-size: 1rem; font-weight: 600; } /* Search box */ .search-input { max-width: 260px; width: 100%; padding: 6px 12px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 0.85rem; background: #f9fafb; } /* Table wrapper */ .skills-table-wrapper { border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border-subtle); background: var(--color-surface); } /* Skills table responsive wrapper */ .skills-table-wrapper { width: 100%; overflow-x: auto; /* enables horizontal scroll if needed */ } /* Ensure the table doesn’t shrink too hard on small screens */ .skills-table { width: 100%; min-width: 800px; /* adjust if you want it wider or narrower */ } /* Skills table */ .skills-table { width: 100%; min-width: 800px; border-collapse: collapse; font-size: 0.88rem; } .skills-table thead { background: var(--color-surface-soft); } .skills-table th, .skills-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); white-space: nowrap; color: var(--color-text); } .skills-table th { font-weight: 600; } .skills-table tbody tr:hover { background: rgba(148, 163, 184, 0.08); } /* Status pill */ .status-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .status-active { background: #dcfce7; color: #166534; } .status-archived { background: #fee2e2; color: #b91c1c; } /* Rubrics list action pills (Edit / Archive) */ .action-link { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.25); background: rgba(59, 130, 246, 0.08); color: #1d4ed8; font-size: 0.8rem; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; } .action-link + .action-link { margin-left: 4px; } /* Midnight theme variant for action pills */ body.app-shell.theme-dark .action-link { background: rgba(59, 130, 246, 0.18); border-color: rgba(59, 130, 246, 0.5); color: #e5edff; } .action-link:last-child { margin-right: 0; } .action-link:hover { text-decoration: underline; } /* Empty state text under the table */ .skills-empty { padding: 12px; font-size: 0.85rem; color: #6b7280; } /* Archive / Unarchive = softer danger pill on the right */ .skills-table td:last-child .action-link:last-child { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.35); color: #b91c1c; } body.app-shell.theme-dark .skills-table td:last-child .action-link:last-child { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.4); color: #fecaca; } /* ========================================= Rubrics Builder – Midnight theme overrides ========================================= */ .app-shell.theme-dark .rubric-block-card, .app-shell.theme-dark .line-item-block-card { background-color: #020617; /* match app Midnight body */ border-color: #0f172a; /* slightly brighter edge */ box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75), 0 18px 45px rgba(15, 23, 42, 0.9); /* subtle depth, not too extra */ } /* Section header row at the top of each block */ body.app-shell.theme-dark .rubric-section-header { background: #020617; border-bottom: 1px solid #0f172a; } /* “Rubric Block / Line-Item Block” pill at the top-left */ body.app-shell.theme-dark .rubric-block-type-pill { background: #0f172a; color: #e5e7eb; border-color: #1e293b; } /* Block title chip (“New Rubric Block / New Line Item Block”) */ body.app-shell.theme-dark .rubric-block-title-input { background: #020617; color: #e5e7eb; border-color: #1e293b; } /* Big section description + line item description textareas */ body.app-shell.theme-dark .rubric-section-description-textarea, body.app-shell.theme-dark .rubric-line-item-description-textarea { background: #020617; color: #e5e7eb; border-color: #1e293b; } /* Line-item title + option label + points inputs */ body.app-shell.theme-dark .rubric-line-item-title-input, body.app-shell.theme-dark .rubric-option-label-input, body.app-shell.theme-dark .rubric-option-points-input { background: #020617; color: #e5e7eb; border-color: #1e293b; } /* Skill dropdown inside line-item block */ body.app-shell.theme-dark .rubric-skill-select { background: #020617; color: #e5e7eb; border-color: #1e293b; } /* Options & Points table wrapper */ body.app-shell.theme-dark .rubric-options-table { background: #020617; border-color: #044b5e; } /* Header row inside the options table */ body.app-shell.theme-dark .rubric-options-header-row { background: #020640; border-bottom: 1px solid #020640; } /* Zebra rows for options – subtle, not nightclub */ body.app-shell.theme-dark .rubric-options-row:nth-child(odd) { background: rgba(15, 23, 42, 0.85); } body.app-shell.theme-dark .rubric-options-row:nth-child(even) { background: rgba(15, 23, 42, 0.65); } /* Header + body rows: kill light grid lines */ body.app-shell.theme-dark .rubric-options-header-row, body.app-shell.theme-dark .rubric-options-row { border-top: 0px solid #044b5e; border-bottom: 0px solid #044b5e; } /* Cells themselves sometimes carry the light border */ body.app-shell.theme-dark .rubric-options-table th, body.app-shell.theme-dark .rubric-options-table td { border-color: #0044b5e; } /* “X” delete buttons on options */ body.app-shell.theme-dark .rubric-options-delete-btn { border-color: #1e293b; background: #020617; color: #fca5a5; } /* “+ Add Option” / “+ Add Line Item” inside blocks – reuse cyan halo */ body.app-shell.theme-dark .rubric-options-add-btn, body.app-shell.theme-dark .rubric-add-line-item-btn { background: rgba(15, 23, 42, 0.9); border-color: #22d3ee; color: #e0f2fe; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.25), 0 0 18px rgba(34, 211, 238, 0.55); } /* Section Description textarea */ .app-shell.theme-dark .rubric-item-textarea { background-color: #020617; /* deep navy */ color: #f9fafb; /* light text */ border-color: #1f2937; /* slate border */ } .app-shell.theme-dark .rubric-item-textarea::placeholder { color: #6b7280; /* muted placeholder */ } /* Rubric description – Midnight */ body.app-shell.theme-dark #rubricDescription { background: #020617; /* deep navy */ color: #e5e7eb; border-color: #1e293b; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 18px 45px rgba(15, 23, 42, 0.9); } body.app-shell.theme-dark #rubricDescription::placeholder { color: #6b7280; } /* Overall QA Comments textarea on evaluation.html – Midnight */ body.app-shell.theme-dark #generalComments { background: #020617; /* deep navy, same as rubricDescription */ color: #e5e7eb; border-color: #1e293b; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 18px 45px rgba(15, 23, 42, 0.9); } body.app-shell.theme-dark #generalComments::placeholder { color: #6b7280; } /* Read-only comments block on evaluation-detail.html – Midnight */ body.app-shell.theme-dark #detailComments.eval-comments-body { background: #020617; /* deep navy */ color: #e5e7eb; border: 1px solid #1e293b; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 18px 45px rgba(15, 23, 42, 0.9); } /* ========================================= QA Evaluation Sections – Midnight theme ========================================= */ /* Container hint text */ body.app-shell.theme-dark .qa-sections-hint { color: #9ca3af; } /* Section card = match rubric-block-card vibes */ body.app-shell.theme-dark .qa-section-card { background-color: #020617; /* deep navy, same as rubric blocks */ border: 1px solid #0f172a; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75), 0 18px 45px rgba(15, 23, 42, 0.9); } /* QA Evaluation – Midnight theme: item cards match rubric-item-card */ body.app-shell.theme-dark .qa-item.qa-item-line, body.app-shell.theme-dark .qa-item.qa-item-rubric { background-color: #020640; /* same as .rubric-item-card */ border-color: #0f172a; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75), 0 18px 45px rgba(15, 23, 42, 0.9); color: #f9fafb; } /* Let the inner row just be layout, not another card */ body.app-shell.theme-dark .qa-item-row { background: transparent; } /* Section header + title + description */ body.app-shell.theme-dark .qa-section-header { margin-bottom: 16px; } body.app-shell.theme-dark .qa-section-title { color: #e5e7eb; } body.app-shell.theme-dark .qa-section-description { color: #9ca3af; } /* Item rows inside a section */ body.app-shell.theme-dark .qa-item-row { background: rgba(15, 23, 42, 0.9); border-radius: 10px; padding: 10px 12px; border: 1px solid #1e293b; } body.app-shell.theme-dark .qa-item + .qa-item { margin-top: 8px; } /* Item label + description toggle */ body.app-shell.theme-dark .qa-item-label span { color: #e5e7eb; } body.app-shell.theme-dark .qa-desc-toggle { color: #9ca3af; } /* Expanded description block under line items */ body.app-shell.theme-dark .qa-item-description { background: #020617; color: #e5e7eb; border-radius: 8px; padding: 8px 10px; border: 1px solid #1e293b; } /* Pills (YES / NO / etc.) */ body.app-shell.theme-dark .qa-pill { background-color: #020617; border-color: #1e293b; color: #e5e7eb; } /* N/A pill – keep a slightly softer outline */ body.app-shell.theme-dark .qa-pill.qa-pill-na { border-style: dashed; border-color: #38bdf8; } /* Selected pill state – stronger highlight */ body.app-shell.theme-dark .qa-pill-selected { background: #0ea5e9; border-color: #38bdf8; color: #0b1120; } /* Per-line and section comments */ body.app-shell.theme-dark .qa-item-comment, body.app-shell.theme-dark .qa-section-comment { background: #020617; color: #e5e7eb; border-color: #1e293b; } body.app-shell.theme-dark .qa-item-comment::placeholder, body.app-shell.theme-dark .qa-section-comment::placeholder { color: #6b7280; } /* Labels for comments */ body.app-shell.theme-dark .qa-item-comment-label, body.app-shell.theme-dark .qa-comment-label, body.app-shell.theme-dark .qa-comment-label-item { color: #9ca3af; } /* ============================================================ QA EVALUATION – SECTION CARDS & PILLS ============================================================ */ /* Section card wrapper */ .qa-section-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom: 24px; } /* Section header */ .qa-section-header { margin-bottom: 16px; } .qa-section-title { margin: 0; font-weight: 600; font-size: 1rem; color: #111827; } .qa-section-description { margin-top: 4px; font-size: 0.85rem; color: #6b7280; } /* Layouts */ .qa-items-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* 🔹 3 per row */ column-gap: 24px; row-gap: 8px; margin-top: 8px; } .qa-items-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } /* Line-item row */ .qa-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .qa-item-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 500; color: #374151; max-width: 70%; line-height: 1.35; } .qa-desc-toggle { border: none; background: transparent; cursor: pointer; font-size: 0.75rem; padding: 2px 4px; border-radius: 999px; line-height: 1; color: #4b5563; transform: rotate(-90deg); /* looks like a collapsed chevron */ } .qa-desc-toggle.is-open { transform: rotate(0deg); } .qa-item-description { margin-top: 4px; margin-bottom: 8px; font-size: 0.8rem; color: #6b7280; } .qa-item-description.is-collapsed { display: none; } /* Pill group */ .qa-pill-group { display: flex; gap: 6px; } /* Pills */ .qa-pill { border-radius: 9999px; border: 1px solid #d1d5db; padding: 4px 12px; font-size: 0.75rem; background-color: #f3f4f6; cursor: pointer; transition: all 0.15s ease; } .qa-pill:hover { background-color: #e5e7eb; } /* Selected state – unified yellow for ANY label */ .qa-pill-selected { border-color: #eab308; font-weight: 600; background-color: #facc15; color: #111827; } /* Per-item comment (line-item based only) */ .qa-comment-label-item { margin-top: 8px; font-size: 0.78rem; color: #4b5563; } .qa-comment-textarea-item { width: 100%; min-height: 55px; border-radius: 6px; border: 1px solid #d1d5db; padding: 8px; resize: vertical; background: #ffffff; font-size: 0.85rem; } /* Section-level comment */ .qa-comment-label { display: block; margin-top: 12px; font-size: 0.78rem; color: #374151; } .qa-comment-textarea { width: 100%; margin-top: 4px; min-height: 56px; resize: vertical; font-size: 0.8rem; padding: 6px 8px; border-radius: 4px; border: 1px solid #d1d5db; background-color: #ffffff; } /* Section footer scores */ .qa-section-footer { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; background: #f9fafb; border-radius: 8px; padding: 8px 12px; margin-top: 16px; font-size: 0.8rem; } .qa-section-score { display: flex; align-items: center; gap: 4px; } .qa-section-score-label { text-transform: uppercase; font-size: 0.7rem; color: #6b7280; letter-spacing: 0.05em; } .qa-section-score-value { font-size: 0.8rem; font-weight: 600; color: #111827; } /* Optional line-item highlight for special sections */ .qa-line-item-card { background: #fffbeb; /* very light yellow */ border-radius: 8px; padding: 12px 14px; } /* ============================================================ QA EVALUATION – COMPLETED EVALUATIONS LIST ============================================================ */ /* Filters row above the table */ .qa-filters-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 12px; align-items: flex-end; } .qa-filter-group { display: flex; flex-direction: column; font-size: 0.75rem; color: #6b7280; } .qa-filter-group label { margin-bottom: 4px; font-weight: 500; } .qa-filter-group input, .qa-filter-group select { min-width: 160px; padding: 6px 10px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 0.8rem; outline: none; } .qa-filter-group input:focus, .qa-filter-group select:focus { border-color: #facc15; box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4); } /* Midnight overrides – Completed Evaluations filters */ body.app-shell.theme-dark .qa-filter-group { color: var(--color-text-muted); /* label color */ } body.app-shell.theme-dark .qa-filter-group label { color: var(--color-text-muted); } body.app-shell.theme-dark .qa-filter-group input, body.app-shell.theme-dark .qa-filter-group select { background: #020617; /* deep navy, like tables + cards */ border-color: #1f2937; color: var(--color-text); /* light text */ box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9); } /* Placeholder text (Agent/Rubric/Evaluator inputs) */ body.app-shell.theme-dark .qa-filter-group input::placeholder { color: var(--color-text-muted); } /* Score threshold settings row */ .qa-settings-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; } .qa-settings-group { flex: 1 1 260px; } .qa-threshold-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; color: #4b5563; } .qa-threshold-inline input { width: 60px; padding: 4px 6px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 0.8rem; outline: none; } .qa-threshold-inline input:focus { border-color: #facc15; box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.4); } .qa-settings-save { align-self: flex-end; height: 32px; padding: 4px 12px; font-size: 0.8rem; } .qa-settings-status { display: block; margin-top: 4px; font-size: 0.75rem; color: #16a34a; } /* Card around the table */ .qa-table-container { background: white; border-radius: 12px; border: 1px solid #e5e7eb; margin: 32px auto 0; /* top margin 32px, centered horizontally */ padding: 20px; width: 100%; max-width: 1600px; /* match the card width */ } /* Overall QA score row under Save button */ .overall-score-row { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: #374151; } .overall-score-label { font-weight: 600; } /* Score badges */ .qa-score-badge { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; /* bold numbers */ white-space: nowrap; min-width: 45px; text-align: center; letter-spacing: 0.3px; } .qa-details-link { font-size: 0.8rem; color: #2563eb; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid #d1d5db; display: inline-block; } .qa-details-link:hover { background-color: #eff6ff; border-color: #2563eb; } .qa-score-high { background-color: #bbf7d0; color: #065f46; border: 1px solid #34d399; } .qa-score-mid { background-color: #fde68a; color: #92400e; border: 1px solid #facc15; } .qa-score-low { background-color: #fecaca; color: #991b1b; border: 1px solid #f87171; } /* Table base */ .qa-table { width: 100%; border-collapse: collapse; } .qa-table th { text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--color-border-subtle); } .qa-table td { padding: 14px 0; font-size: 0.87rem; color: var(--color-text); border-bottom: 1px solid var(--color-border-subtle); } .qa-table tr:last-child td { border-bottom: none; } .eval-detail-grid { display: grid; grid-template-columns: 2fr 2fr 1fr; /* Overview | People | Score */ gap: 32px; margin-top: 24px; align-items: flex-start; } .eval-detail-score-column { text-align: center; } /* Center the label inside the "Edit this evaluation" button */ #editEvaluationButton { display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* Dark theme styling for "Edit this evaluation" button */ body.app-shell.theme-dark #editEvaluationButton { background-color: #020640; border: 1px solid #0ea5e9; color: #e5e7eb; } body.app-shell.theme-dark #editEvaluationButton:hover { background-color: #0ea5e9; /* keep it flat */ border-color: #e5e7eb; } .eval-detail-column { min-width: 0; } .eval-detail-heading { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; } .eval-detail-dl { margin: 0 0 16px; font-size: 0.85rem; color: #374151; } .eval-detail-dl div { display: flex; gap: 8px; margin-bottom: 4px; } .eval-detail-dl dt { min-width: 110px; font-weight: 600; color: #6b7280; } .eval-detail-dl dd { margin: 0; } .eval-score-row { margin: 8px 0 4px; } .eval-comments-body { font-size: 0.85rem; color: #374151; background: #f9fafb; border-radius: 8px; padding: 10px 12px; min-height: 40px; } /* Highlight for unanswered questions when validation fails */ .qa-item-missing { outline: 2px solid #ef4444; border-radius: 8px; background-color: #fef2f2; transition: background-color 0.2s ease, outline-color 0.2s ease; } /* ============================================================ DASHBOARD – PERFORMANCE OVERVIEW ============================================================ */ .dashboard-card { /* semantic alias: .card already handles width & padding */ } /* Header row: title + welcome */ .dashboard-header-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } /* Filters row (date range + team type) */ .dashboard-filters-row { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 20px; margin-bottom: 20px; } .filter-group { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; } .filter-group.small { min-width: 180px; } .filter-group label { font-weight: 600; color: #374151; } .date-range-inline { display: flex; align-items: center; gap: 8px; } input[type="date"], .filter-group select { padding: 6px 10px; border-radius: 999px; /* keep it pill-like */ border: 1px solid var(--color-input-border); background: var(--color-input-bg); font-size: 0.85rem; color: var(--color-text); box-sizing: border-box; } /* Midnight theme – make the date-picker icon visible + neon-ish */ body.app-shell.theme-dark input[type="date"] { /* let the browser know we’re in a dark control context */ color-scheme: dark; } body.app-shell.theme-dark input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; /* turn the default icon into a bright cyan/neon */ filter: invert(65%) sepia(90%) saturate(900%) hue-rotate(170deg) brightness(110%) contrast(105%); } .filter-hint { font-size: 0.75rem; color: #6b7280; margin: 0; } /* Top grid: Gauge + Skill Performance */ .dashboard-top-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 24px; margin-top: 8px; } .overview-card { background: #f9fafb; border-radius: 20px; padding: 20px 24px; } .overview-card-title { margin-top: 0; margin-bottom: 10px; font-size: 0.95rem; font-weight: 600; } /* Gauge visual */ .gauge-card { display: flex; flex-direction: column; align-items: center; } .gauge-visual { position: relative; width: 220px; height: 120px; margin-top: 8px; } /* Semi-circle arc background */ .gauge-arc { position: absolute; inset: 0; border-radius: 220px 220px 0 0; background: linear-gradient( 90deg, #ef4444 0%, #facc15 50%, #22c55e 100% ); mask: radial-gradient(circle at 50% 100%, transparent 55%, black 56%); } /* Fill bar – we’ll drive this with % later */ .gauge-fill { position: absolute; inset: auto 10% 0 10%; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.2); width: 0%; transition: width 0.3s ease-out; } .gauge-center { position: absolute; inset: auto 0 0 0; transform: translateY(36px); text-align: center; } .gauge-value { display: block; font-size: 1.6rem; font-weight: 700; } .gauge-label { display: block; font-size: 0.8rem; color: #6b7280; } /* Skills summary layout */ .skills-summary-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .skills-category h3 { margin: 0 0 8px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: #4b5563; } .skill-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.8rem; } .skill-bar-track { flex: 1; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .skill-bar-fill { height: 100%; width: 40%; /* placeholder; later driven by data */ border-radius: 999px; background: #22c55e; } /* Agent list card */ .dashboard-agents-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .dashboard-agents-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; } .agent-list { display: flex; flex-direction: column; gap: 16px; } /* Future agent tiles base */ .agent-card { border-radius: 18px; background: #ffffff; border: 1px solid #e5e7eb; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 16px; } /* Responsiveness */ @media (max-width: 1100px) { .dashboard-top-grid, .agent-card { grid-template-columns: 1fr; } .skills-summary-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .dashboard-filters-row { flex-direction: column; } .skills-summary-layout { grid-template-columns: 1fr; } } /* ============================================================ QA RUBRIC BUILDER – BLOCKS & LINE ITEMS ============================================================ */ .rubric-builder-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; margin-bottom: 8px; } .rubric-builder-title { margin: 0; font-size: 0.95rem; font-weight: 600; } .rubric-builder-subtitle { margin: 4px 0 0; font-size: 0.8rem; color: #6b7280; } .rubric-builder-actions { display: flex; flex-wrap: wrap; gap: 8px; } .rubric-blocks-container { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; } /* Midnight theme – give the blocks a subtle rail + extra breathing room */ body.app-shell.theme-dark .rubric-blocks-container { margin-top: 16px; /* a bit more offset from the header */ padding-top: 8px; /* space above the first block */ border-top: 1px solid #0b1220; /* soft divider line in dark slate */ gap: 16px; /* slightly looser stacking in dark mode */ } .rubric-empty-state { font-size: 0.85rem; color: #6b7280; padding: 10px 12px; border-radius: 10px; background: #f9fafb; border: 1px dashed #d1d5db; } /* Midnight theme */ body.app-shell.theme-dark .rubric-empty-state { font-size: 0.85rem; color: #6b7280; padding: 10px 12px; border-radius: 10px; background: #020640; border: 1px dashed rgba(56, 189, 248, 0.5); /* cyan-ish, matches our glow */ } /* Block card */ .rubric-block-card { background: #ffffff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); } .rubric-block-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .rubric-block-header-left { display: flex; align-items: center; gap: 8px; } .rubric-block-title-input { padding: 4px 8px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 0.85rem; min-width: 220px; background: #f9fafb; } .rubric-block-header-right .btn-icon { border: none; background: transparent; cursor: pointer; } /* Badges */ .rubric-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; background: #f3f4f6; color: #4b5563; } .rubric-badge-soft { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; background: #fef9c3; color: #854d0e; } /* Line item cards */ .rubric-items-container { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .rubric-item-card { border-radius: 10px; border: 1px solid #e5e7eb; padding: 10px 12px; background: #ffffff; } .rubric-item-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .rubric-item-label-group { display: flex; align-items: center; gap: 8px; flex: 1; } .rubric-item-label-input { flex: 1; padding: 6px 8px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 0.85rem; background: #ffffff; } /* Checkbox label */ .rubric-checkbox-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; color: #4b5563; } /* Meta row */ .rubric-item-meta-row { display: grid; grid-template-columns: 2fr 1.1fr 1.2fr; gap: 10px; margin-bottom: 8px; } @media (max-width: 900px) { .rubric-item-meta-row { grid-template-columns: 1fr; } } .rubric-form-group label { font-size: 0.78rem; font-weight: 600; color: #374151; } .rubric-item-textarea { width: 100%; min-height: 48px; border-radius: 8px; border: 1px solid #d1d5db; padding: 6px 8px; font-size: 0.8rem; background: #ffffff; resize: vertical; } .rubric-item-select { width: 100%; min-height: 36px; border-radius: 999px; border: 1px solid #d1d5db; padding: 4px 8px; font-size: 0.82rem; background: #f9fafb; } /* Options table */ .rubric-options-wrapper { margin-top: 6px; } .rubric-options-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .rubric-options-header-row h4 { margin: 0; font-size: 0.8rem; } .rubric-options-table { border-radius: 8px; border: 1px solid #e5e7eb; background: #ffffff; overflow: hidden; } .rubric-options-row { display: grid; grid-template-columns: 2fr 0.8fr 0.4fr; gap: 0; border-bottom: 1px solid #e5e7eb; } .rubric-options-row:last-child { border-bottom: none; } .rubric-options-row-header { background: #f3f4f6; font-weight: 600; font-size: 0.75rem; } .rubric-options-cell { padding: 6px 8px; font-size: 0.8rem; } .rubric-option-label-input, .rubric-option-points-input { width: 100%; padding: 4px 6px; border-radius: 6px; border: 1px solid #d1d5db; background: #f9fafb; font-size: 0.8rem; } .btn-icon-small { border: none; background: transparent; cursor: pointer; font-size: 0.85rem; } /* Rubric toolbar buttons (Add Rubric Block / Add Line Item Block) */ .btn-outline { padding: 6px 14px; border-radius: 999px; /* pill style */ font-size: 0.85rem; font-weight: 500; border-width: 1px; border-style: solid; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } /* Sunshine theme – soft yellow outline, white fill */ body.app-shell.theme-light .btn-outline { background: #ffffff; border-color: #facc15; /* soft yellow outline */ color: #92400e; /* warm brown text */ box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.05); } body.app-shell.theme-light .btn-outline:hover { background: #fef9c3; box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.25); } /* Rubric description field */ #rubricDescription { width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid #d1d5db; font-size: 0.9rem; resize: vertical; min-height: 60px; background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } /* Make sure the label aligns with the rest of the form */ #rubricDescription::placeholder { color: #9ca3af; } /* Midnight theme – subtle neon-ish outline to match the nav glow */ body.app-shell.theme-dark .btn-outline { background: transparent; border-color: #22d3ee; /* cyan, aligned with sidebar glow */ color: #e0f2fe; /* very light text */ box-shadow: 0 0 8px rgba(34, 211, 238, 0.35); } body.app-shell.theme-dark .btn-outline:hover { background: rgba(34, 211, 238, 0.08); box-shadow: 0 0 12px rgba(34, 211, 238, 0.55); } .rubric-max-score { margin-top: 4px; margin-bottom: 12px; font-size: 0.82rem; color: #4b5563; font-weight: 500; } .rubric-controls { display: flex; gap: 6px; align-items: center; margin-right: 10px; } .rubric-move-btn { background: #f2f2f2; border: 1px solid #ccc; padding: 2px 6px; cursor: pointer; border-radius: 4px; font-size: 12px; } .rubric-delete-btn { background: none; border: none; color: #d9534f; cursor: pointer; font-size: 12px; text-decoration: underline; } .rubric-move-btn:hover, .rubric-delete-btn:hover { opacity: 0.75; } .rubric-badge { display: inline-block; background: #f8e663; /* your yellow highlight color */ padding: 4px 12px; /* more width */ border-radius: 12px; font-size: 12px; font-weight: 600; white-space: nowrap; /* prevents wrapping */ margin-right: 10px; } /* Individual rubric item cards inside each block */ .app-shell.theme-dark .rubric-item-card { background-color: #020640; /* same deep navy as blocks */ border-color: #0f172a; /* subtle outline */ box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.75), 0 18px 45px rgba(15, 23, 42, 0.9); /* gentle depth */ color: #f9fafb; } /* ============================================================ QA RUBRIC BUILDER – RUBRIC BLOCK LINE ITEM GRID ============================================================ */ .rubric-items-container { margin-top: 8px; } .rubric-items-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1024px) { .rubric-items-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .rubric-items-grid { grid-template-columns: 1fr; } } /* Mini-card styling for rubric line items */ .rubric-items-grid .rubric-item-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; background: #ffffff; } .rubric-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .rubric-item-label-group { flex: 1; } .rubric-item-label-input { width: 100%; font-size: 0.85rem; padding: 4px 6px; } .rubric-item-na-group { margin-top: 8px; } .rubric-item-na-group .rubric-checkbox-label { font-size: 0.8rem; } /* ============================================================ Talynto Phase 3 – QA Evaluation visual polish (CSS-only) ============================================================ */ /* Stack all items in a section neatly */ .qa-section-body { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } /* Base item card */ .qa-item { padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; } /* LINE-ITEM sections: light yellow cards */ .qa-item-line { background: #ebebeb; /* very light yellow, matches earlier */ border-color: #ebebeb; /* soft yellow border */ } /* RUBRIC sections: stay on white card, light border only */ .qa-item-rubric { background: #ebebeb; /* blend into the section card */ border-color: #e5e7eb; } /* Space between stacked items */ .qa-item + .qa-item { margin-top: 4px; } /* Keep the existing row layout but let it breathe inside the card */ .qa-item-row { align-items: flex-start; } /* ------------------------------------------------------------------ Per-line and section comments (new classes used by JS) ------------------------------------------------------------------ */ .qa-item-comment-wrapper, .qa-section-comment-wrapper { margin-top: 8px; } .qa-item-comment-label, .qa-section-comment-label { font-size: 0.78rem; color: #4b5563; margin-bottom: 4px; } .qa-item-comment, .qa-section-comment { width: 100%; min-height: 56px; border-radius: 6px; border: 1px solid #d1d5db; padding: 8px; font-size: 0.82rem; resize: vertical; background-color: #ffffff; } /* ------------------------------------------------------------------ Line-item footer: QA SCORE + SKILL SCORE + SKILL [Name] ------------------------------------------------------------------ */ .qa-item-footer { margin-top: 8px; padding-top: 6px; border-top: 1px dashed #e5e7eb; font-size: 0.78rem; color: #4b5563; display: flex; flex-wrap: wrap; gap: 6px; } /* Footer text pieces – line-item and rubric-based share styles */ .qa-item-qaScore, .qa-item-skillScore, .qa-item-skillName, .qa-section-qaScore, .qa-section-skillScore, .qa-section-skillName { display: inline-flex; align-items: baseline; } /* Make QA SCORE a bit stronger */ .qa-item-qaScore, .qa-section-qaScore { font-weight: 600; color: #111827; } /* Midnight theme – QA Evaluation footers align with rubric item card */ body.app-shell.theme-dark .qa-item-footer, body.app-shell.theme-dark .qa-section-footer { background: #020640; /* match rubric-item-card */ color: #e5e7eb; border-top-color: rgba(148, 163, 184, 0.5); /* softer divider on dark */ } /* Make QA + Skill texts readable in Midnight */ body.app-shell.theme-dark .qa-item-qaScore, body.app-shell.theme-dark .qa-item-skillScore, body.app-shell.theme-dark .qa-item-skillName, body.app-shell.theme-dark .qa-section-qaScore, body.app-shell.theme-dark .qa-section-skillScore, body.app-shell.theme-dark .qa-section-skillName { color: #e5e7eb; } /* Skill score number stands out */ .qa-item-skillScore, .qa-section-skillScore { font-weight: 600; } /* Skill name slightly softer but still emphasized */ .qa-item-skillName, .qa-section-skillName { font-weight: 500; } /* Insert " • " between QA SCORE and SKILL SCORE */ .qa-item-qaScore::after, .qa-section-qaScore::after { content: " •"; margin: 0 4px; } /* Insert " • " before the SKILL [Name] text */ .qa-item-skillName::before, .qa-section-skillName::before { content: " • "; } /* ------------------------------------------------------------------ Section footer alignment (rubric-based block footer) ------------------------------------------------------------------ */ /* Reuse existing .qa-section-footer but make sure it aligns with the line-item footer look (already has bg + padding) */ .qa-section-footer { gap: 10px; } /* Optional: keep the two main chunks grouped nicely */ .qa-section-footer .qa-section-qaScore, .qa-section-footer .qa-section-skillScore { margin-right: 4px; } /* ============================================================ QA Evaluation – Phase 3 layout + score footers ============================================================ */ /* Base layout for all sections */ .qa-section-body { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; } /* Rubric-based sections -> compact 3-column grid */ .qa-section-body:has(.qa-item-rubric) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; } /* Responsive fallback so it doesn’t die on smaller screens */ @media (max-width: 1200px) { .qa-section-body:has(.qa-item-rubric) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .qa-section-body:has(.qa-item-rubric) { grid-template-columns: 1fr; } } /* Item shells */ .qa-item { padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; } /* In rubric grid cells, let the label use full width so it can wrap */ .qa-item-rubric .qa-item-label { max-width: 100%; } /* Align labels to the top so multi-line questions don’t look off */ .qa-item-row { align-items: flex-start; } /* ----------------- Comments (line + section) ----------------- */ .qa-item-comment-wrapper, .qa-section-comment-wrapper { margin-top: 8px; } .qa-item-comment-label, .qa-section-comment-label { font-size: 0.78rem; color: #4b5563; margin-bottom: 4px; } .qa-item-comment, .qa-section-comment { width: 100%; min-height: 56px; border-radius: 6px; border: 1px solid #d1d5db; padding: 8px; font-size: 0.82rem; resize: vertical; background-color: #ffffff; } /* -------------- QA SCORE / SKILL SCORE strips ---------------- */ /* Line-item footer: visually match the gray rubric footer */ .qa-item-footer { margin-top: 8px; background: #f9fafb; /* same gray as .qa-section-footer */ border-radius: 6px; padding: 6px 8px; font-size: 0.78rem; color: #4b5563; display: flex; flex-wrap: wrap; gap: 6px; } /* Shared typography for both section and line-item score bits */ .qa-item-qaScore, .qa-item-skillScore, .qa-item-skillName, .qa-section-qaScore, .qa-section-skillScore, .qa-section-skillName { display: inline-flex; align-items: baseline; } .qa-item-qaScore, .qa-section-qaScore { font-weight: 600; color: #111827; } .qa-item-skillScore, .qa-section-skillScore { font-weight: 600; } .qa-item-skillName, .qa-section-skillName { font-weight: 500; } /* Insert " • " between QA SCORE and SKILL SCORE */ .qa-item-qaScore::after, .qa-section-qaScore::after { content: " | "; margin: 0 20px; } /* And another " • " before the SKILL [Name] text */ .qa-item-skillName::before, .qa-section-skillName::before { content: " | "; margin: 0 20px; } /* QA footer spacing tweak */ .qa-item-qaScore, .qa-section-qaScore { margin-right: 10px; /* space after QA SCORE block */ } .qa-item-skillScore, .qa-section-skillScore { margin-right: 10px; /* space after SKILL SCORE block */ } .qa-item-skillName, .qa-section-skillName { margin-left: 10px; /* small buffer before SKILL [Name] text */ } /* Read-only pills in evaluation-detail */ .qa-pill-readonly { cursor: default; pointer-events: none; } .qa-pill-group-readOnly { justify-content: flex-end; } /* Section-level read-only QA comment */ .qa-section-comment-wrapper-readonly { margin-top: 12px; } /* Read-only section comment */ .qa-section-comment-readonly { background: #ffffff; border-radius: 6px; border: 1px dashed #d1d5db; padding: 8px; font-size: 0.85rem; white-space: pre-wrap; } /* Read-only line-item comment */ .qa-item-comment-wrapper-readonly { margin-top: 8px; } .qa-item-comment-readonly { background: #ffffff; border-radius: 6px; border: 1px dashed #d1d5db; padding: 8px; font-size: 0.85rem; white-space: pre-wrap; } /* ============================================================ EVALUATION DETAIL – DISPUTE & NOTES CHAT THREAD ============================================================ */ .dispute-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .dispute-header-actions { display: flex; align-items: center; gap: 8px; } .dispute-messages { margin-top: 16px; /* a bit more space after the helper text */ display: flex; flex-direction: column; gap: 16px; /* slightly larger gap between messages */ } /* Form spacing under the thread */ .dispute-form { margin-top: 20px; /* space between last message and input box */ } /* Optional: give the textarea a tiny top margin from the card edge */ .dispute-input { margin-top: 8px; } /* One message "cluster": name/role, bubble, timestamp */ .dispute-message { display: flex; flex-direction: column; align-items: flex-start; max-width: 60%; /* controls bubble length (Messenger-ish) */ } /* Messages from the current user float to the right */ .dispute-message--self { align-self: flex-end; align-items: flex-end; } @media (max-width: 768px) { .dispute-message { max-width: 80%; } } /* Name + role line */ .dispute-message-header { font-size: 0.78rem; color: #6b7280; margin-bottom: 2px; margin-left: 12px; /* ⬅️ nudge just inside the left bubble edge */ } .dispute-message-author { font-weight: 600; } /* The chat bubble itself */ .dispute-message-body { display: inline-block; padding: 8px 12px; border-radius: 16px; background: #facc15; /* yellow bubble for received */ color: #424244; /* your requested text color */ font-size: 0.85rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); white-space: pre-wrap; /* ⬅️ preserves \n from the textarea */ } /* Outgoing bubble: dark background, white text */ .dispute-message--self .dispute-message-body { background: #424244; color: #ffffff; } /* Timestamp under the bubble */ .dispute-message-time { margin-top: 2px; margin-left: 12px; /* ⬅️ same indent as header for incoming msgs */ font-size: 0.75rem; color: #9ca3af; } /* For self messages (right side), mirror the indent + right align */ .dispute-message--self .dispute-message-header, .dispute-message--self .dispute-message-time { margin-left: 0; margin-right: 12px; /* ⬅️ indent from the right bubble edge */ text-align: right; } /* ========================= Generic table styling (User lists, Accounts & LOB, Logs) ========================= */ .table-wrapper { border-radius: 14px; border: 1px solid var(--color-border-subtle); background: var(--color-surface); overflow-x: auto; } /* Core data tables */ .data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; background: transparent; } .data-table thead { background: var(--color-surface-soft); } .data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; color: var(--color-text); } .data-table th { font-weight: 600; } /* Zebra striping + hover highlight */ .data-table tbody tr:nth-child(even) { background: rgba(148, 163, 184, 0.04); } body.app-shell.theme-dark .data-table tbody tr:nth-child(even) { background: rgba(148, 163, 184, 0.10); /* slightly stronger in Midnight */ } .data-table tbody tr:hover { background: rgba(250, 204, 21, 0.12); /* soft yellow hover using brand */ } /* Make LOBs column wider on User Management tables */ .um-user-lists .data-table th:nth-child(5), .um-user-lists .data-table td:nth-child(5) { min-width: 220px; word-break: break-word; } /* Right-align Actions column on user tables */ .um-user-lists .data-table th:last-child, .um-user-lists .data-table td:last-child { text-align: right; } /* Visual separation between Active / Deactivated sections */ #userListsSection { margin-top: 24px; } #inactiveUsersPanel { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; } /* Generic "Edit" pill button used in tables */ .btn-link { background: transparent; border: 1px solid #111827; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-link:hover { background: #111827; color: #f9fafb; border-color: #111827; } /* Make "Active LOBs" column wider in Accounts overview */ .um-account-summary .data-table th:nth-child(3), .um-account-summary .data-table td:nth-child(3) { min-width: 220px; word-break: break-word; } /* ========================= User Management – tables & filters ========================= */ .table-wrapper { border-radius: 14px; border: 1px solid #e5e7eb; background: #ffffff; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } .data-table thead { background: #f3f4f6; } .data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: top; } .data-table th { font-weight: 600; color: #374151; } .data-table tbody tr:nth-child(even) { background: #f9fafb; } .data-table tbody tr:hover { background: #fefce8; } /* Wider LOBs column in User lists */ .um-user-lists .data-table th:nth-child(5), .um-user-lists .data-table td:nth-child(5) { min-width: 220px; word-break: break-word; } /* Right-align Actions column */ .um-user-lists .data-table th:last-child, .um-user-lists .data-table td:last-child { text-align: right; } /* Visual separation for Deactivated panel */ #userListsSection { margin-top: 24px; } #inactiveUsersPanel { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; } /* Filters row */ .user-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .user-filters input, .user-filters select { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; background: #f9fafb; min-width: 180px; } /* Midnight overrides – User Management filters */ body.app-shell.theme-dark .user-filters input, body.app-shell.theme-dark .user-filters select { background: #020617; /* same deep navy as tables */ border-color: #1f2937; color: var(--color-text); /* light text */ } /* Placeholder / muted text still readable */ body.app-shell.theme-dark .user-filters input::placeholder { color: var(--color-text-muted); } /* Generic small pill button for Edit in tables */ .btn-link { background: transparent; border: 1px solid #111827; border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .btn-link:hover { background: #111827; color: #f9fafb; border-color: #111827; } /* Midnight overrides – table "Edit" pill button */ body.app-shell.theme-dark .btn-link { border-color: #facc15; /* brand yellow outline */ color: #facc15; /* yellow text */ background: transparent; } body.app-shell.theme-dark .btn-link:hover { background: rgba(250, 204, 21, 0.16); /* soft yellow glow */ color: #facc15; border-color: #facc15; } /* Read-only styling for user email when editing an existing user */ #userEmailInput[disabled] { background: #e5e7eb; color: #6b7280; border-color: #d1d5db; cursor: not-allowed; } /* Password criteria visuals (profile + user management) */ .password-criteria .criteria-icon { font-size: 0.75rem; color: #9ca3af; } .password-criteria li.criterion-met .criteria-icon { color: #16a34a; } /* ============================================================ DARK THEME – TABLE SURFACES ============================================================ */ /* Generic table wrappers */ body.app-shell.theme-dark .table-wrapper, body.app-shell.theme-dark .skills-table-wrapper, body.app-shell.theme-dark .qa-table-container { background: #020617; /* deep navy / slate */ border-color: #1f2937; } /* Base row background in Midnight */ body.app-shell.theme-dark .data-table tbody tr, body.app-shell.theme-dark .skills-table tbody tr, body.app-shell.theme-dark .qa-table tbody tr { background: #020617; } /* Zebra striping – slightly lighter navy */ body.app-shell.theme-dark .data-table tbody tr:nth-child(even), body.app-shell.theme-dark .skills-table tbody tr:nth-child(even) { background: #020c2b; /* a touch lighter than base */ } /* Header row background */ body.app-shell.theme-dark .data-table thead, body.app-shell.theme-dark .skills-table thead, body.app-shell.theme-dark .qa-table thead { background: #020617; } /* Borders a bit stronger so rows don’t blend together */ body.app-shell.theme-dark .data-table th, body.app-shell.theme-dark .data-table td, body.app-shell.theme-dark .skills-table th, body.app-shell.theme-dark .skills-table td, body.app-shell.theme-dark .qa-table th, body.app-shell.theme-dark .qa-table td { border-bottom-color: #1f2937; } /* Hover: slightly brighter navy, still dark-UI friendly */ body.app-shell.theme-dark .data-table tbody tr:hover, body.app-shell.theme-dark .skills-table tbody tr:hover, body.app-shell.theme-dark .qa-table tbody tr:hover { background: #0f172a; } /* ============================================================ SETTINGS PAGE ============================================================ */ .settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: flex-start; } /* Make certain settings cards span the full row */ .settings-card-wide { grid-column: 1 / -1; } @media (max-width: 1100px) { .settings-grid { grid-template-columns: 1fr; } } .settings-card-title { font-size: 1rem; margin-bottom: 4px; color: var(--color-text); /* keep titles strong */ } .settings-card-subtitle { font-size: 0.85rem; margin-bottom: 12px; color: var(--color-text-muted); } .settings-helper-text { font-size: 0.8rem; margin-top: 8px; color: var(--color-text-muted); } .settings-field-spaced { margin-top: 12px; } .settings-submit-full { margin-top: 16px; width: 100%; } /* Optional: status text under page title */ .settings-status { margin-top: 4px; font-size: 0.85rem; color: var(--color-text-muted); } /* If you later add an onboarding banner again */ .settings-onboarding-banner { display: none; /* JS can toggle this to block */ margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 0.85rem; background-color: var(--color-banner-bg); color: var(--color-banner-text); } /* Fine-tuning for Account & LOB QA thresholds card */ .settings-subsection-label { margin-top: 16px; margin-bottom: 8px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); } /* Reuse the generic table look but tighten widths a bit */ .settings-table-wrapper { margin-top: 4px; margin-bottom: 8px; overflow-x: auto; } .settings-table th, .settings-table td { font-size: 0.85rem; white-space: nowrap; } /* Column-sizing hints – browser will respect as much as possible */ .settings-table .col-account { min-width: 150px; } /* Emphasize the Account name on its "Account default" row */ .settings-table tr[data-row-type="account"] td:first-child { font-weight: 600; } .settings-table .col-lob { min-width: 160px; } .settings-table .col-threshold { text-align: center; width: 90px; } /* Make sure body cells that hold numeric thresholds are centered too */ .settings-table td.qa-threshold-cell { text-align: center; } .settings-table .col-status { min-width: 80px; } .settings-table .col-actions { min-width: 90px; text-align: right; } /* Empty-state row inside tables */ .table-empty-row .table-empty-cell { text-align: center; padding: 10px 12px; font-size: 0.8rem; color: var(--color-text-muted); } /* ============================================================ SUNSHINE / MIDNIGHT THEME TOGGLE (SIDEBAR FOOTER) ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-size: 0.8rem; color: var(--color-text-muted); } /* Small label text */ .theme-toggle-text { font-size: 0.8rem; font-weight: 500; } /* Track (the pill) */ .theme-toggle-track { position: relative; width: 54px; height: 28px; border-radius: 999px; padding: 3px; display: flex; align-items: center; box-sizing: border-box; background: linear-gradient(135deg, #38bdf8, #a5f3fc); /* Sunshine sky */ box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12); transition: background 0.25s ease, box-shadow 0.25s ease; } /* Thumb (sun/moon) */ .theme-toggle-thumb { width: 22px; height: 22px; border-radius: 999px; background: #facc15; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.35); transform: translateX(0); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } /* Sunshine state (default) */ .theme-toggle--sunshine .theme-toggle-track { background: linear-gradient(135deg, var(--color-accent-midnight), #a5f3fc); } .theme-toggle--sunshine .theme-toggle-thumb { background: var(--color-accent-sunshine); color: #92400e; } /* Midnight state */ .theme-toggle--midnight .theme-toggle-track { background: linear-gradient(135deg, var(--color-accent-midnight), #a5f3fc); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.4); } .theme-toggle--midnight .theme-toggle-thumb { transform: translateX(24px); background: #e5e7eb; color: #0f172a; } /* In dark theme, keep label readable */ body.app-shell.theme-dark .theme-toggle-text { color: var(--color-text-muted); } /* Lifetime skills list rows */ .skill-row { border: 1px solid var(--color-border-subtle); background: var(--color-surface); border-radius: 14px; padding: 10px 12px; } .skill-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .skill-name { font-weight: 650; font-size: 0.92rem; color: var(--color-text); } .skill-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .skill-updated { font-size: 0.78rem; color: var(--color-text-muted); } .skill-delta { font-size: 0.78rem; font-weight: 650; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--color-border-subtle); color: var(--color-text); background: var(--color-surface-soft); } .skill-delta.up { border-color: rgba(22,163,74,.35); color: var(--color-success); background: rgba(22,163,74,.08); } .skill-delta.down { border-color: rgba(185,28,28,.35); color: var(--color-error); background: rgba(185,28,28,.08); } .skill-delta.flat { color: var(--color-text-muted); background: var(--color-surface-soft); } /* Progress bar */ .skill-bar { height: 12px; border-radius: 999px; background: var(--color-input-border); overflow: hidden; position: relative; } .skill-bar-fill { height: 100%; width: 0%; border-radius: 999px; transition: width 350ms ease; position: relative; } /* Default fill (no change / unknown) */ .skill-row.delta-flat .skill-bar-fill, .skill-row.delta-none .skill-bar-fill { background: var(--color-text-muted); } /* Up / Down fill colors */ .skill-row.delta-up .skill-bar-fill { background: var(--color-success); } .skill-row.delta-down .skill-bar-fill { background: var(--color-error); } /* Optional glow sweep animation */ .skill-row.delta-up .skill-bar-fill::after, .skill-row.delta-down .skill-bar-fill::after { content: ""; position: absolute; inset: 0; opacity: 0.75; } .skill-row.delta-up .skill-bar-fill::after { background: linear-gradient(90deg, transparent, rgba(22,163,74,.55), transparent); transform: translateX(-120%); animation: glowUp 900ms ease-out 1; } .skill-row.delta-down .skill-bar-fill::after { background: linear-gradient(90deg, transparent, rgba(185,28,28,.55), transparent); transform: translateX(120%); animation: glowDown 900ms ease-out 1; } @keyframes glowUp { to { transform: translateX(120%); } } @keyframes glowDown { to { transform: translateX(-120%); } } /* Tiny score text under bar */ .skill-scoreline { margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; color: var(--color-text-muted); }