/* =============================================
Keka Design System — Custom Properties
============================================= */
:root {
--primary: #7C46F1;
--primary-dark: #5A2DD1;
--primary-soft: #EDE9FF;
--accent: #1077DA;
--accent-soft: #E8F2FD;
--green: #16A34A;
--green-soft: #DCFCE7;
--teal: #0891B2;
--teal-soft: #CFFAFE;
--amber: #D97706;
--amber-soft: #FEF3C7;
--orange: #EA580C;
--orange-soft: #FFEDD5;
--yellow: #EAB308;
--yellow-soft: #FEF9C3;
--red: #DC2626;
--red-soft: #FEE2E2;
--neutral: #6B6560;
--neutral-soft: #F0EEF8;
--bg: #F6F5FB;
--surface: #FFFFFF;
--surface-2: #F0EEF8;
--border: #E4E1EF;
--border-strong: #C9C4DE;
--text-primary: #1A1814;
--text-secondary: #6B6560;
--text-tertiary: #9993AE;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
--shadow-m: 0 6px 20px rgba(0,0,0,0.10);
--shadow: 0 4px 16px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--shadow-primary: 0 2px 8px rgba(124,70,241,0.28);
--radius-xs: 4px;
--radius-s: 6px;
--radius-m: 10px;
--radius-l: 14px;
--radius-xl: 20px;
--radius-pill: 100px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 150ms;
--t: 220ms;
--t-slow: 350ms;
--frozen-hover-bg: var(--primary-soft);
/* Primary color opacity scale */
--primary-a04: rgba(124,70,241,0.04);
--primary-a08: rgba(124,70,241,0.08);
--primary-a10: rgba(124,70,241,0.10);
--primary-a12: rgba(124,70,241,0.12);
--primary-a15: rgba(124,70,241,0.15);
--primary-a20: rgba(124,70,241,0.20);
--primary-a30: rgba(124,70,241,0.30);
--primary-a50: rgba(124,70,241,0.50);
/* Z-index scale */
--z-base: 1;
--z-sticky: 10;
--z-dropdown: 100;
--z-modal: 200;
--z-toast: 300;
--z-overlay: 500;
--z-top: 9999;
}
/* Dark mode tokens */
body.dark {
--bg: #0F0E14;
--surface: #18161F;
--surface-2: #211E2A;
--border: #2D2A3A;
--border-strong: #3D3850;
--text-primary: #EEEAF8;
--text-secondary: #9993AE;
--text-tertiary: #6B6580;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
--shadow-m: 0 6px 20px rgba(0,0,0,0.28);
--shadow: 0 4px 16px rgba(0,0,0,0.35);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
--primary-soft: rgba(124,70,241,0.15);
--frozen-hover-bg: color-mix(in srgb, var(--primary) 22%, var(--surface));
--accent-soft: rgba(16,119,218,0.15);
--green-soft: rgba(22,163,74,0.15);
--teal-soft: rgba(8,145,178,0.15);
--amber-soft: rgba(217,119,6,0.15);
--orange-soft: rgba(234,88,12,0.18);
--yellow-soft: rgba(234,179,8,0.18);
--red-soft: rgba(220,38,38,0.15);
--neutral-soft: rgba(107,101,96,0.15);
}
/* =============================================
Reset & Base
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; } /* scroll-behavior removed — caused perf issues on mobile */
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background: var(--bg);
color: var(--text-primary);
display: flex;
height: 100vh;
height: 100dvh; /* dynamic viewport height — fixes iOS Safari address-bar reflow */
overflow: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--t-slow) ease, color var(--t-slow) ease;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }
input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
/* Lucide icon sizing */
.icon { display: inline-flex; align-items: center; justify-content: center; }
.icon svg { display: block; }
/* =============================================
Animations
============================================= */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes snackIn {
from { opacity: 0; transform: translateX(-50%) translateY(16px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s var(--ease) both; }
/* =============================================
Scrollbar
============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
::-webkit-scrollbar-corner { background: transparent; }
/* =============================================
Text selection (brand)
============================================= */
::selection { background: var(--primary); color: #fff; }
::-moz-selection { background: var(--primary); color: #fff; }
/* =============================================
Navigation Sidebar
============================================= */
.nav-rail {
width: 224px;
min-width: 224px;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
z-index: 10;
overflow-x: hidden;
/* Single smooth ease-in-out — no spring overshoot on width transitions */
transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1),
min-width 260ms cubic-bezier(0.4, 0, 0.2, 1),
background var(--t-slow) ease;
}
/* Collapsed sidebar */
.nav-rail.collapsed { width: 60px; min-width: 60px; }
.nav-rail.collapsed .brand-text,
.nav-rail.collapsed .nav-label,
.nav-rail.collapsed .nav-section-label,
.nav-rail.collapsed .user-info { display: none; }
/* Collapsed: NO layout-changing properties — only opacity hides labels */
/* Layout stays identical so the browser never reflows during the width transition */
.nav-rail.collapsed .nav-count { opacity: 0; pointer-events: none; }
.nav-rail.collapsed .kb-beta-tag { display: none; }
.nav-rail.collapsed .nav-collapse-btn { position: static; transform: none; margin-left: 0; }
/* Labels: max-width + opacity transition — GPU composite, no layout reflow */
.nav-label,
.brand-text,
.nav-section-label,
.user-info {
max-width: 180px;
overflow: hidden;
white-space: nowrap;
opacity: 1;
transition: max-width 260ms cubic-bezier(0.4,0,0.2,1),
opacity 180ms ease;
}
.nav-rail.collapsed .nav-label,
.nav-rail.collapsed .brand-text,
.nav-rail.collapsed .nav-section-label,
.nav-rail.collapsed .user-info {
max-width: 0;
opacity: 0;
}
/* Sidebar tooltip — position:fixed, appended to body by JS, escapes overflow */
.nav-tooltip {
position: fixed;
background: var(--text-primary);
color: var(--surface);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
padding: 5px 10px;
border-radius: var(--radius-s);
pointer-events: none;
box-shadow: var(--shadow);
z-index: 9998; /* below inline-edit dropdown (9999) */
opacity: 0;
transition: opacity 120ms ease;
}
.nav-tooltip.visible { opacity: 1; }
/* Collapse toggle button */
.nav-collapse-btn {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-s);
color: var(--text-tertiary);
cursor: pointer;
flex-shrink: 0;
margin-left: auto;
transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t) var(--ease);
}
.nav-collapse-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-collapse-btn svg { width: 15px; height: 15px; }
.nav-rail.collapsed .nav-collapse-btn { transform: none; }
body.dark .nav-rail {
background: rgba(15,14,20,0.92);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.nav-rail-top {
padding: 11px 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px;
min-height: 0;
}
/* Expanded padding keeps the rail header on the same divider baseline as the main top bar.
Collapsed header: padding-top(10) + brand(34) + gap(0) + btn(20) = 64px content + 1px border = 65px total.
Top-bar auto-height = padding(14)+icon-btn(36)+padding(14)=64px + 1px border = 65px total. */
.nav-rail.collapsed .nav-rail-top { justify-content: center; align-items: center; padding: 10px 0 0; flex-direction: column; gap: 0; }
.nav-rail.collapsed .nav-collapse-btn { height: 20px; }
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
overflow: hidden;
}
.brand-icon {
width: 34px;
height: 34px;
background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
border-radius: var(--radius-m);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.22);
box-shadow: 0 2px 6px rgba(106,58,244,0.20), inset 0 1px 0 rgba(255,255,255,0.18);
}
.brand-icon svg { width: 22px; height: 22px; }
/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .brand-icon {
background: #fff;
color: #7C46F1;
border: 1px solid rgba(124,70,241,0.20);
box-shadow: 0 2px 8px rgba(0,0,0,0.40);
}
.brand-text {
display: flex;
flex-direction: column;
white-space: normal;
line-height: 1.1;
}
.brand-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary);
}
.brand-sub {
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary);
line-height: 1.3;
margin-top: 1px;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Program-switch transition overlay (HCR ⇄ PER) ── */
.prog-switch-overlay {
position: fixed;
display: none; /* set to flex by JS during a switch */
align-items: center;
justify-content: center;
z-index: 60;
opacity: 0;
pointer-events: none;
background: radial-gradient(120% 120% at 50% 40%, rgba(247,246,251,0.55), rgba(247,246,251,0.30));
}
body.dark .prog-switch-overlay {
background: radial-gradient(120% 120% at 50% 40%, rgba(20,16,31,0.55), rgba(20,16,31,0.32));
}
.pso-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
will-change: transform, opacity;
}
.pso-mark svg { width: 56px; height: 56px; display: block; filter: drop-shadow(0 10px 24px rgba(124,70,241,0.40)); }
.pso-name {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--text-primary, #1A1330);
text-align: center;
}
body.dark .pso-name { color: #fff; }
/* ── Program Toggle (HCR / PER) ── */
.prog-toggle {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 12px 10px 6px;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(124,70,241,0.08), rgba(124,70,241,0));
}
/* Sliding indicator — GSAP moves this, CSS just styles it */
.prog-slider {
position: absolute;
top: 0; left: 0;
z-index: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(124,70,241,0.18), rgba(124,70,241,0.08));
border: 1px solid rgba(124,70,241,0.42);
box-shadow: 0 12px 26px rgba(124,70,241,0.14), inset 0 1px 0 rgba(255,255,255,0.55);
pointer-events: none;
will-change: transform;
}
body.dark .prog-slider {
background: linear-gradient(135deg, rgba(124,70,241,0.3), rgba(124,70,241,0.12));
border-color: rgba(167,139,250,0.34);
}
.nav-rail.collapsed .prog-slider { border-radius: 10px; }
.prog-pill {
flex: 1;
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
padding: 6px 10px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
border: 1px solid rgba(124,70,241,0.16);
border-radius: 12px;
background: rgba(255,255,255,0.68);
color: var(--text-secondary);
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
transition: color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
line-height: 1;
}
.prog-pill:hover {
color: var(--text-primary);
border-color: rgba(124,70,241,0.32);
transform: translateY(-1px);
}
.prog-pill__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.prog-pill__label {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Active pill: slider provides the fill, while the pill keeps the text color.
Collapsed rail adds its own border so the active state stays legible even
when the compact layout visually compresses the slider layer. */
.prog-pill--active {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--primary);
}
body.dark .prog-pill {
background: rgba(24,22,31,0.9);
border-color: rgba(167,139,250,0.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
body.dark .prog-pill--active {
background: transparent;
border-color: transparent;
box-shadow: none;
color: #fff;
}
.nav-rail.collapsed .prog-toggle {
flex-direction: column;
gap: 6px;
padding: 10px 6px 8px;
background: transparent;
}
.nav-rail.collapsed .prog-pill {
flex: 0 0 auto;
width: 40px;
min-height: 32px;
padding: 0;
gap: 0;
border-radius: var(--radius-m);
box-shadow: none;
}
.nav-rail.collapsed .prog-pill--active {
border-color: rgba(124,70,241,0.38);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
}
body.dark .nav-rail.collapsed .prog-pill--active {
border-color: rgba(167,139,250,0.44);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.nav-rail.collapsed .prog-pill:hover {
transform: none;
box-shadow: none;
}
.nav-rail.collapsed .prog-pill__icon {
display: none;
}
.nav-rail.collapsed .prog-pill__label {
font-size: 9px;
letter-spacing: .11em;
}
.nav-items {
flex: 1;
padding: 10px 10px 10px;
overflow-y: auto;
overflow-x: hidden; /* prevents horizontal scrollbar when items wider than 60px collapsed rail */
display: flex;
flex-direction: column;
gap: 2px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-m);
color: var(--text-secondary);
font-size: 13.5px;
font-weight: 500;
transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
position: relative;
text-align: left;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active {
background: var(--primary-soft);
color: var(--primary);
font-weight: 600;
}
.nav-item.active .nav-item-icon { color: var(--primary); }
.nav-item-icon {
display: flex;
align-items: center;
width: 18px;
flex-shrink: 0;
}
.nav-item-icon svg { width: 16px; height: 16px; }
.nav-indicator { position: relative; display: flex; align-items: center; }
/* Inline count pill — right side of nav item */
.nav-count {
margin-left: auto;
background: var(--surface-2);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
min-width: 24px;
height: 18px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
letter-spacing: 0;
transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.nav-item.active .nav-count {
background: var(--primary);
color: #fff;
}
.nav-item:hover .nav-count { background: var(--border); color: var(--text-primary); }
/* Hide count in collapsed mode */
.nav-rail.collapsed .nav-count { display: none; }
.nav-label { font-size: 13.5px; }
.nav-divider {
height: 1px;
background: var(--border);
margin: 8px 4px;
}
.nav-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
padding: 2px 12px 4px;
}
.nav-rail-bottom {
padding: 12px 10px;
border-top: 1px solid var(--border);
}
.user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-m);
width: 100%;
transition: background var(--t-fast) ease;
}
.user-chip:hover { background: var(--surface-2); }
.nav-rail.collapsed .user-chip { justify-content: center; padding: 8px 0; gap: 0; }
.nav-rail.collapsed .nav-rail-bottom { padding: 12px 0; }
.user-info { display: flex; flex-direction: column; text-align: left; }
.user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-role { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
/* =============================================
Avatars
============================================= */
.avatar {
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
position: relative;
color: #fff;
letter-spacing: 0.02em;
}
.avatar-sm { width: 26px; height: 26px; font-size: 9px; }
/* Tooltip */
.avatar[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
background: var(--surface-2);
color: var(--text-primary);
border: 1px solid var(--border);
font-size: 11px;
font-family: 'Plus Jakarta Sans', sans-serif;
white-space: nowrap;
padding: 4px 8px;
border-radius: var(--radius-s);
pointer-events: none;
opacity: 0;
transition: opacity 120ms;
z-index: 100;
box-shadow: var(--shadow);
font-weight: 500;
}
.avatar[data-tooltip]:hover::after { opacity: 1; }
/* =============================================
Main Content
============================================= */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
background: var(--bg);
transition: background var(--t-slow) ease;
}
.app-boot-loader {
position: absolute;
inset: 69px 0 0;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--bg) 88%, transparent)),
radial-gradient(circle at top center, rgba(124,70,241,.08), transparent 40%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 40;
}
.app-boot-loader__card {
width: min(420px, calc(100vw - 96px));
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 26px 28px;
border-radius: 28px;
border: 1px solid color-mix(in srgb, var(--border) 78%, white 22%);
background: color-mix(in srgb, var(--surface) 90%, white 10%);
box-shadow: 0 24px 80px rgba(32, 18, 69, 0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.app-boot-loader__motion {
width: 88px;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
}
.app-boot-loader__eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--primary);
}
.app-boot-loader__card strong {
font-size: 20px;
line-height: 1.08;
letter-spacing: -.03em;
}
.app-boot-loader__card span {
max-width: 280px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.55;
}
/* =============================================
Top App Bar
============================================= */
.top-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-shrink: 0;
transition: background var(--t-slow) ease;
}
body.dark .top-bar {
background: rgba(24,22,31,0.92);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.page-title {
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.3px;
white-space: nowrap;
}
.top-bar-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/* ── Search Bar — collapsed icon pill, expands on click ── */
.search-bar {
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 7px 8px;
gap: 0;
cursor: pointer;
flex-shrink: 0;
/* drive open/close via padding + gap transition; width comes from inner wrapper */
transition:
background 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
padding 340ms cubic-bezier(0.16, 1, 0.3, 1),
gap 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search-bar:hover {
background: var(--surface-2);
border-color: var(--border-strong);
}
.search-bar:hover .search-icon { color: var(--primary); }
.search-bar--open {
background: var(--surface);
border-color: var(--border);
padding: 7px 12px;
gap: 8px;
cursor: default;
}
.search-bar--open:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(124,70,241,0.12);
}
/* Icon — stays fixed left */
.search-icon {
color: var(--text-secondary);
display: flex;
flex-shrink: 0;
pointer-events: none;
transition: color 180ms ease;
}
.search-bar--open .search-icon { color: var(--text-primary); }
.search-icon svg { width: 15px; height: 15px; }
/* Inner wrapper — max-width drives the expand animation */
.search-input-wrap {
display: flex;
align-items: center;
gap: 6px;
max-width: 0;
overflow: hidden;
transition: max-width 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.search-bar--open .search-input-wrap {
max-width: 240px;
}
.search-input {
border: none;
background: transparent;
color: var(--text-primary);
font-size: 13.5px;
font-weight: 500;
width: 160px;
min-width: 0;
outline: none;
opacity: 0;
pointer-events: none;
transition: opacity 200ms ease 140ms;
}
.search-bar--open .search-input {
opacity: 1;
pointer-events: all;
}
.search-input::placeholder { color: var(--text-tertiary); }
.search-clear {
color: var(--text-tertiary);
padding: 0;
display: flex;
align-items: center;
flex-shrink: 0;
transition: color var(--t-fast) ease;
animation: sc-pop var(--t-fast) var(--ease); /* Rollback: remove this line + @keyframes sc-pop. Replays on each unhide (.hidden toggle) */
}
/* appear pop for the search clear (×) button — fires every time .hidden is removed */
@keyframes sc-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
.search-clear:hover { color: var(--text-primary); }
.search-clear svg { width: 14px; height: 14px; }
/* Icon Button */
.icon-btn {
width: 36px;
height: 36px;
border-radius: var(--radius-m);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
position: relative;
flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.icon-btn svg { width: 17px; height: 17px; }
.notif-bell-motion {
position: absolute;
inset: -4px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.btn-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--red);
color: #fff;
font-size: 9px;
font-weight: 700;
min-width: 14px;
height: 14px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
/* Primary Button */
.btn-filled {
display: flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: var(--primary);
color: #fff;
border-radius: var(--radius-m);
font-size: 13.5px;
font-weight: 600;
box-shadow: var(--shadow-primary);
transition: background var(--t-fast) ease, transform 0.22s cubic-bezier(0.34,1.38,0.64,1), box-shadow 0.22s ease;
white-space: nowrap;
letter-spacing: 0.01em;
position: relative;
overflow: hidden;
}
/* Shimmer sweep — same as kb-ask-btn */
.btn-filled::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform 0.5s ease;
pointer-events: none;
}
.btn-filled:hover::before { transform: translateX(100%); }
.btn-filled:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(124,70,241,0.42);
}
.btn-filled:active { transform: scale(0.96); box-shadow: var(--shadow-primary); }
.btn-filled:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.btn-filled svg { width: 15px; height: 15px; }
/* Ghost/Outlined Button */
.btn-outlined {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: var(--surface);
color: var(--text-primary);
font-size: 13px;
font-weight: 500;
transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
white-space: nowrap;
}
.btn-outlined:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn-outlined:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-outlined svg { width: 14px; height: 14px; }
/* Text Button */
.btn-text {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: var(--radius-m);
color: var(--primary);
font-size: 13px;
font-weight: 600;
transition: background var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease;
}
.btn-text:hover { background: var(--primary-soft); color: var(--primary-dark); }
.btn-text:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-text svg { width: 14px; height: 14px; }
/* =============================================
Views
============================================= */
.view { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.view.active { display: flex; }
/* Entrance animation is OPT-IN: switchView adds .view-enter-anim only on real navigations —
never on HTML parse, never during a program switch (the blur reveal handles that). This is
why the initial view doesn't double-animate (no parse anim + no re-activation replay). */
.view.view-enter-anim { animation: view-enter 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.view#view-all-requests {
position: relative;
isolation: isolate;
--requests-morph-wash-bg: linear-gradient(118deg, rgba(124,70,241,0.16) 0%, rgba(124,70,241,0.06) 28%, rgba(8,145,178,0.12) 58%, rgba(16,185,129,0.08) 100%);
--requests-morph-sheen-bg: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0) 100%);
--requests-morph-wash-filter: blur(18px) saturate(1.14);
--requests-morph-sheen-filter: blur(28px);
--requests-ghost-aura-bg:
radial-gradient(circle at 18% 50%, rgba(124,70,241,0.18), transparent 28%),
radial-gradient(circle at 78% 52%, rgba(8,145,178,0.14), transparent 30%),
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 48%, rgba(255,255,255,0) 100%);
--requests-ghost-aura-filter: blur(30px) saturate(1.12);
}
.view#view-all-requests::before,
.view#view-all-requests::after {
content: '';
position: absolute;
inset: 96px 18px 20px;
pointer-events: none;
opacity: 0;
z-index: 8;
}
.view#view-all-requests::before {
border-radius: 26px;
background: var(--requests-morph-wash-bg);
filter: var(--requests-morph-wash-filter);
}
.view#view-all-requests::after {
inset: 118px 8% 42px;
border-radius: 999px;
background: var(--requests-morph-sheen-bg);
filter: var(--requests-morph-sheen-filter);
}
.requests-surface-stage {
position: relative;
flex: 1;
min-height: 0;
}
.requests-surface-panel {
position: absolute;
inset: 0;
min-height: 0;
backface-visibility: hidden;
transform: translateZ(0);
transform-origin: 50% 50%;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.requests-surface-panel--active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.requests-surface-panel--inactive {
z-index: 1;
}
.view#view-all-requests.requests-view--morphing .requests-surface-panel {
visibility: visible;
}
.view#view-all-requests.requests-view--morphing::before {
animation: requests-fluid-wash 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view#view-all-requests.requests-view--morphing::after {
animation: requests-fluid-sheen 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.view-mode-ghost-stage {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 12;
overflow: hidden;
}
.view-mode-ghost {
position: absolute;
margin: 0;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 28px 80px rgba(28, 18, 66, 0.18);
transform-origin: 50% 12%;
background: var(--surface);
}
.view-mode-ghost-aura {
position: absolute;
inset: 112px 9% 44px;
border-radius: 999px;
background: var(--requests-ghost-aura-bg);
filter: var(--requests-ghost-aura-filter);
opacity: 0;
}
body.dark .view#view-all-requests {
--requests-morph-wash-bg: linear-gradient(118deg, rgba(124,70,241,0.11) 0%, rgba(124,70,241,0.05) 28%, rgba(8,145,178,0.08) 58%, rgba(16,185,129,0.05) 100%);
--requests-morph-sheen-bg: linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.08) 36%, rgba(8,145,178,0.07) 52%, rgba(16,185,129,0.04) 68%, rgba(124,70,241,0) 100%);
--requests-morph-wash-filter: blur(18px) saturate(1.02);
--requests-morph-sheen-filter: blur(28px) saturate(1);
--requests-ghost-aura-bg:
radial-gradient(circle at 18% 50%, rgba(124,70,241,0.11), transparent 30%),
radial-gradient(circle at 78% 52%, rgba(8,145,178,0.09), transparent 32%),
linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.07) 40%, rgba(8,145,178,0.06) 58%, rgba(124,70,241,0) 100%);
--requests-ghost-aura-filter: blur(30px) saturate(1.01);
}
/* ── PER All Requests view-mode morphing (mirrors HCR) ───────────────────── */
.view#view-per-all-requests {
position: relative;
isolation: isolate;
}
.view#view-per-all-requests.requests-view--morphing .requests-surface-panel {
visibility: visible;
}
.view#view-per-all-requests.requests-view--morphing::before {
animation: requests-fluid-wash 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.view#view-per-all-requests.requests-view--morphing::after {
animation: requests-fluid-sheen 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.view#view-per-all-requests::before,
.view#view-per-all-requests::after {
content: '';
position: absolute;
inset: 96px 18px 20px;
pointer-events: none;
opacity: 0;
z-index: 8;
}
.view#view-per-all-requests::before {
border-radius: 26px;
background: linear-gradient(118deg, rgba(124,70,241,0.16) 0%, rgba(124,70,241,0.06) 28%, rgba(8,145,178,0.12) 58%, rgba(16,185,129,0.08) 100%);
filter: blur(18px) saturate(1.14);
}
.view#view-per-all-requests::after {
inset: 118px 8% 42px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.34) 47%, rgba(255,255,255,0) 100%);
filter: blur(28px);
}
body.dark .view#view-per-all-requests::after {
background: linear-gradient(90deg, rgba(124,70,241,0) 0%, rgba(124,70,241,0.08) 36%, rgba(8,145,178,0.07) 52%, rgba(16,185,129,0.04) 68%, rgba(124,70,241,0) 100%);
}
@keyframes view-enter {
0% { opacity: 0; transform: translateY(8px); }
40% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes requests-fluid-wash {
0% { opacity: 0; transform: scale(0.92) translate3d(0, 24px, 0); }
28% { opacity: 0.82; }
62% { opacity: 0.56; transform: scale(1.02) translate3d(0, -4px, 0); }
100% { opacity: 0; transform: scale(1.08) translate3d(0, -18px, 0); }
}
@keyframes requests-fluid-sheen {
0% { opacity: 0; transform: translate3d(-16%, 28px, 0) scaleX(0.88); }
24% { opacity: 0.78; }
100% { opacity: 0; transform: translate3d(18%, -18px, 0) scaleX(1.08); }
}
/* =============================================
Stats Row
============================================= */
.stats-row {
display: flex;
gap: 14px;
padding: 20px 24px 16px;
flex-shrink: 0;
}
.stat-card {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t-fast) ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.stat-card--active { border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(124,70,241,0.18), var(--shadow) !important; }
.stat-card--violet::before { background: var(--primary); }
.stat-card--red::before { background: var(--red); }
.stat-card--amber::before { background: var(--amber); }
.stat-card--green::before { background: var(--green); }
.stat-card--accent::before { background: var(--accent); }
.stat-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.stat-value {
font-size: 30px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.5px;
}
.stat-value--violet { color: var(--primary); }
.stat-value--red { color: var(--red); }
.stat-value--amber { color: var(--amber); }
.stat-value--green { color: var(--green); }
.stat-value--accent { color: var(--accent); }
.stat-sub { font-size: 11.5px; color: var(--text-tertiary); font-weight: 500; }
/* =============================================
Filter Row
============================================= */
.filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 24px 8px;
flex-shrink: 0;
position: relative; /* establish stacking context */
z-index: 30; /* above sticky table header (z-index: 25) so dropdowns render above */
}
.filter-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.filter-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Filters button */
.filter-panel-btn { gap: 6px; }
.filter-panel-btn svg { width: 14px; height: 14px; }
.fp-count {
background: var(--primary);
color: #fff;
font-size: 10px;
font-weight: 700;
min-width: 18px;
height: 18px;
border-radius: var(--radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
margin-left: 2px;
}
/* Active filter chips */
.active-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.active-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: var(--primary-soft);
border: 1px solid rgba(124,70,241,0.25);
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
color: var(--primary);
cursor: pointer;
transition: background var(--t-fast) ease;
white-space: nowrap;
}
.active-chip:hover { background: rgba(124,70,241,0.2); }
.active-chip strong { font-weight: 700; }
.chip-x { font-size: 14px; line-height: 1; opacity: 0.7; margin-left: 2px; }
/* Filter panel */
.fp-overlay {
position: fixed; inset: 0;
background: rgba(15,14,20,0.3);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 300;
}
.fp-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
/* ── Panel slide keyframes ── */
@keyframes panel-slide-in {
0% { transform: translateX(100%); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
@keyframes panel-slide-out {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
.filter-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 320px;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
z-index: 301;
display: flex;
flex-direction: column;
transform: translateX(100%); /* resting off-screen */
}
/* Opening — fill:both holds the from-state before display change settles */
.filter-panel:not(.hidden) {
will-change: transform, opacity;
animation: panel-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Closing — JS adds class, then .hidden after 250ms */
.filter-panel--closing {
will-change: transform, opacity;
animation: panel-slide-out 240ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}
.fp-header {
display: flex;
align-items: center;
gap: 8px;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.fp-title { font-size: 15px; font-weight: 700; flex: 1; }
.fp-clear-btn { font-size: 12.5px; padding: 5px 8px; color: var(--text-secondary); }
.fp-clear-btn:hover { color: var(--red); background: var(--red-soft); }
.fp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.fp-group { display: flex; flex-direction: column; gap: 5px; }
.fp-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.fp-select {
appearance: none;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 9px 32px 9px 12px;
font-size: 13.5px;
font-weight: 500;
color: var(--text-primary);
font-family: inherit;
outline: none;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239993AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color var(--t-fast);
}
.fp-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,70,241,0.12); }
.fp-select option[value="all"] { color: var(--text-tertiary); }
.fp-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
padding: 16px 20px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 13px;
border-radius: var(--radius-pill);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-secondary);
transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
letter-spacing: 0.01em;
}
.chip:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
.chip--filter.active {
background: var(--primary-soft);
color: var(--primary);
border-color: rgba(124,70,241,0.3);
font-weight: 700;
}
.chip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
/* Chip color variants */
.chip--success.active, .chip--success:has(.chip-dot) { color: var(--green); }
.chip--primary.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(16,119,218,0.3); }
.chip--warning.active { color: var(--amber); background: var(--amber-soft); border-color: rgba(217,119,6,0.3); }
.chip--error.active { color: var(--red); background: var(--red-soft); border-color: rgba(220,38,38,0.3); }
.chip--secondary.active { color: var(--teal); background: var(--teal-soft); border-color: rgba(8,145,178,0.3); }
.filter-dropdowns {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
/* Dropdown */
.dropdown { position: relative; }
.dropdown-trigger svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.dropdown.open .dropdown-trigger svg { transform: rotate(180deg); }
.dropdown.open .dropdown-trigger { border-color: var(--primary); color: var(--primary); }
.dropdown-menu {
position: absolute;
left: 0;
top: calc(100% + 6px);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
min-width: 180px;
z-index: 50;
box-shadow: var(--shadow-lg);
overflow: hidden;
opacity: 0;
transform: scaleY(0.92) translateY(-4px);
transform-origin: top;
pointer-events: none;
transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}
.dropdown.open .dropdown-menu { opacity: 1; transform: scaleY(1) translateY(0); pointer-events: all; }
.dropdown-menu li {
padding: 9px 16px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
color: var(--text-primary);
transition: background var(--t-fast);
}
.dropdown-menu li:hover { background: var(--surface-2); }
.dropdown-menu li.selected { color: var(--primary); font-weight: 700; }
.sort-btn { color: var(--text-primary); font-weight: 500; gap: 5px; }
.sort-label { white-space: nowrap; }
.sort-btn:hover { color: var(--text-primary); }
.sort-arrow { font-size: 13px; }
/* =============================================
Data Table
============================================= */
.table-section {
flex: 1;
overflow: hidden;
padding: 0 24px 20px;
display: flex;
flex-direction: column;
}
.table-wrapper {
flex: 1;
overflow: auto;
border-radius: var(--radius-l);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
background: var(--surface);
/* Scroll performance: isolate repaints */
contain: layout paint;
-webkit-overflow-scrolling: touch; /* iOS momentum scroll */
view-transition-name: requests-surface;
}
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
/* Absorbs leftover width — real columns never stretch beyond content */
.col-spacer { padding: 0; pointer-events: none; border: none !important; min-width: 0; }
.data-table thead {
position: sticky;
top: 0;
z-index: 60; /* must exceed all sticky body cells: row-sel-cell(46), col-frozen(45), frozen-th(50), sel-th(52) */
background: var(--surface-2);
}
/* Unfrozen state — headers scroll with content */
.data-table.headers-unfrozen thead { position: relative; top: auto; z-index: auto; }
.data-table th {
padding: 10px 14px;
text-align: left;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
color: var(--text-tertiary);
white-space: nowrap;
border-bottom: 1px solid var(--border);
text-transform: uppercase;
cursor: default;
}
.data-table th.sortable {
cursor: pointer;
user-select: none;
transition: color var(--t-fast);
}
.data-table th.sortable:hover { color: var(--text-primary); }
.data-table th.active-sort { color: var(--primary); }
.sort-icon { width: 12px; height: 12px; vertical-align: middle; margin-left: 3px; }
.data-table tbody tr {
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background var(--t-fast) ease, opacity var(--t-fast) ease;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--primary-soft); }
body.dark .data-table tbody tr:hover { background: var(--primary-soft); } /* --primary-soft already dark-mode-aware */
.data-table td {
padding: 11px 14px;
color: var(--text-primary);
vertical-align: middle;
white-space: nowrap;
background: var(--surface);
}
.data-table tbody tr:hover td:not(.col-frozen):not(.row-sel-cell) { background: transparent; }
/* =============================================
Column Manager Modal
============================================= */
.col-mgr-overlay {
position: fixed; inset: 0;
background: rgba(15,14,20,0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 200;
}
.col-mgr-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.col-mgr-overlay--closing { animation: cmd-overlay-out 160ms ease forwards !important; }
.col-mgr {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* resting center */
background: var(--surface);
border-radius: var(--radius-xl);
width: 420px;
max-width: 95vw;
max-height: 80vh;
display: flex;
flex-direction: column;
z-index: 201;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.col-mgr--card-fields {
width: 1020px;
max-width: min(96vw, 1020px);
max-height: min(86vh, 820px);
}
.col-mgr--card-fields .col-mgr-body {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
padding-bottom: 12px;
}
.col-mgr:not(.hidden) {
will-change: transform, opacity;
animation: modal-spotlight-in 390ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.col-mgr--closing {
will-change: transform, opacity;
animation: modal-spotlight-out 190ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}
.col-mgr-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.col-mgr-header h3 { font-size: 15px; font-weight: 700; }
.col-mgr-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px 20px;
}
.col-mgr-hint {
font-size: 12px;
color: var(--text-tertiary);
margin-bottom: 14px;
font-weight: 500;
}
.col-list { display: flex; flex-direction: column; gap: 0; }
.col-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
user-select: none;
transition: background var(--t-fast) ease;
border-radius: var(--radius-s);
}
.col-item:last-child { border-bottom: none; }
.col-item.dragging { opacity: 0.35; }
.col-item.drag-over { box-shadow: 0 -2px 0 0 var(--primary); }
.col-item-grip {
color: var(--text-tertiary);
cursor: grab;
display: flex;
align-items: center;
padding: 0 2px;
flex-shrink: 0;
transition: color var(--t-fast);
}
.col-item-grip:active { cursor: grabbing; }
.col-item:hover .col-item-grip { color: var(--text-secondary); }
.col-item-label {
flex: 1;
font-size: 13.5px;
font-weight: 500;
color: var(--text-primary);
}
.col-item-label--hidden { color: var(--text-tertiary); }
.card-field-config {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-height: 0;
}
.card-field-config__split {
display: grid;
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
gap: 18px;
align-items: stretch;
flex: 1;
min-height: 0;
height: auto;
}
.card-field-config__rail {
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.card-field-list-shell {
min-height: 0;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
border: 1px solid var(--border);
border-radius: var(--radius-m);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.card-field-list-shell::-webkit-scrollbar {
width: 10px;
}
.card-field-list-shell::-webkit-scrollbar-track {
background: transparent;
}
.card-field-list-shell::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.card-field-config__intro {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.card-field-config__intro-copy {
min-width: 0;
}
.card-field-config__intro .col-mgr-hint {
margin-bottom: 0;
max-width: none;
}
.card-field-config__microcopy {
margin-top: 5px;
font-size: 11.5px;
color: var(--text-tertiary);
line-height: 1.45;
}
.card-field-config__count {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: var(--radius-pill);
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
}
.card-field-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 10px;
min-height: 100%;
}
.card-field-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-s);
background: var(--surface);
}
.kanban-card-status-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.kanban-card-status-row .status2-chip {
max-width: 100%;
}
.card-field-item__copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.card-field-item__label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.25;
}
.card-field-item__label--hidden {
color: var(--text-tertiary);
}
.card-field-item__zone {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.card-field-item .col-toggle {
width: 32px;
height: 18px;
}
.card-field-item .col-toggle-track::after {
left: 2px;
top: 2px;
width: 14px;
height: 14px;
}
.card-field-item .col-toggle input:checked + .col-toggle-track::after {
transform: translateX(14px);
}
.card-field-preview-shell {
border: 1px solid var(--border);
border-radius: var(--radius-l);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
padding: 16px;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
}
.card-field-preview-shell__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.card-field-preview-shell__title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.card-field-preview-shell__hint {
margin-top: 3px;
font-size: 11.5px;
color: var(--text-tertiary);
}
.card-field-preview-shell__badge {
display: inline-flex;
align-items: center;
padding: 5px 9px;
border-radius: var(--radius-pill);
background: rgba(124,70,241,0.1);
color: var(--primary);
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
}
.card-field-preview-canvas {
flex: 1;
min-height: 0;
display: grid;
place-items: center;
padding: 14px;
border-radius: calc(var(--radius-l) - 4px);
background: linear-gradient(180deg, rgba(124,70,241,0.05), rgba(124,70,241,0.01));
}
.card-field-preview-board {
max-width: 360px;
width: min(100%, 360px);
margin: 0 auto;
}
.card-field-preview-colhead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.card-field-preview-coltitle {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.card-field-preview-colcount {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
padding: 2px 7px;
border-radius: var(--radius-pill);
background: var(--surface);
border: 1px solid var(--border);
}
/* Toggle switch */
.col-toggle {
position: relative;
display: inline-flex;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.col-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.col-toggle-track {
position: absolute; inset: 0;
background: var(--border-strong);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--t) ease;
}
.col-toggle-track::after {
content: '';
position: absolute;
left: 3px; top: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
transition: transform var(--t) ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.col-toggle input:checked + .col-toggle-track { background: var(--primary); }
.col-toggle input:checked + .col-toggle-track::after { transform: translateX(16px); }
.col-mgr-footer {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px 20px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.col-mgr-footer .btn-text { font-size: 13px; color: var(--text-secondary); }
.col-mgr-footer__status {
min-width: 0;
margin: 0;
text-align: center;
font-size: 11px;
font-weight: 600;
color: var(--amber);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-mgr-footer__status[data-empty="true"] {
visibility: hidden;
pointer-events: none;
}
.col-mgr-footer__status[data-tone="warning"] { color: var(--amber); }
.col-mgr-footer__status[data-tone="error"] { color: var(--red); }
.col-mgr-footer__status[data-tone="success"] { color: var(--green); }
.col-mgr-footer__apply {
justify-self: end;
}
.col-mgr-footer .btn-text:hover { background: var(--surface-2); color: var(--text-primary); }
/* Customer chips in table */
/* QoL #9 — Row pinning: border-left indicator on pinned rows, no icon in cell */
.col-customer-inner {
display: flex;
align-items: center;
min-width: 0;
}
/* Pinned row: subtle tint only — no border (lands on checkbox cell, looks wrong) */
.table-row[data-pinned] td {
background: color-mix(in srgb, var(--primary-soft) 25%, var(--surface)) !important;
}
/* Pin button in row actions bar */
.rab-btn--pin:hover { color: var(--primary); }
.rab-btn--pin-on { color: var(--primary) !important; }
.rab-btn--pin-on svg polygon { fill: var(--primary); stroke: var(--primary); }
.rab-btn--pin-on:hover { background: var(--primary-soft); }
/* Cell star badge — absolutely positioned in left padding zone, no layout impact */
.col-customer { position: relative; }
.row-star-badge {
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 10px; height: 10px;
color: var(--primary); fill: var(--primary);
pointer-events: none;
display: block;
}
.customer-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 200px; min-width: 0; flex: 1; }
mark.search-hl {
background: rgba(255, 213, 0, 0.45);
color: inherit;
border-radius: 2px;
padding: 0 1px;
}
.customer-chip {
display: inline-block;
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: 11.5px;
font-weight: 600;
background: var(--primary-soft);
color: var(--primary);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.no-value { color: var(--text-tertiary); font-size: 12px; }
.customer-chip--merged {
background: var(--surface-2);
color: var(--text-secondary);
border: 1px solid var(--border);
font-style: italic;
}
/* Inline-editable cells */
.cell-editable {
cursor: pointer;
transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease;
border-radius: var(--radius-xs);
}
.cell-editable:hover {
filter: brightness(0.94);
box-shadow: 0 0 0 2px rgba(124,70,241,0.28); /* animated glow, no jarring outline */
}
.cell-text {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
padding: 2px 4px;
border-radius: var(--radius-xs);
}
/* Locked cell — not editable, shows lock icon */
.cell-locked {
cursor: default;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lock-icon {
opacity: 0;
flex-shrink: 0;
transition: opacity var(--t-fast) ease;
vertical-align: middle;
}
.table-row:hover .cell-locked .lock-icon { opacity: 0.45; }
/* Inline edit floating dropdown */
.inline-edit-dropdown {
position: fixed;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg);
padding: 4px;
max-height: min(280px, 60vh);
overflow-y: auto;
min-width: 160px;
animation: slideDown 150ms var(--ease);
}
.ied-option {
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
border-radius: var(--radius-m);
cursor: pointer;
transition: background var(--t-fast) ease;
white-space: nowrap;
}
.ied-option:hover { background: var(--primary-soft); color: var(--primary); }
.ied-option--active {
background: var(--primary-soft);
color: var(--primary);
font-weight: 700;
}
.ied-option--active::after { content: ' ✓'; opacity: 0.7; }
/* ClickUp edit button inside cu-cell */
.cu-cell-top {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
min-width: 0;
}
.cu-edit-btn {
opacity: 0;
display: inline-flex;
align-items: center;
padding: 2px 3px;
border-radius: var(--radius-xs);
color: var(--text-tertiary);
cursor: pointer;
transition: opacity var(--t-fast) ease, color var(--t-fast) ease, background var(--t-fast) ease;
flex-shrink: 0;
}
.cu-cell:hover .cu-edit-btn,
.table-row:hover .cu-edit-btn { opacity: 1; }
.cu-edit-btn:hover { color: var(--primary); background: var(--primary-soft); }
.cu-empty-edit {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
color: var(--text-tertiary);
padding: 2px 6px;
border-radius: var(--radius-xs);
border: 1px dashed var(--border-strong);
}
.cu-empty-edit:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
/* Inline text edit popover */
.inline-edit-text {
position: fixed;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--primary);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg), 0 0 0 3px rgba(124,70,241,0.12);
padding: 10px 12px;
width: 340px;
animation: slideDown 150ms var(--ease);
}
.iet-input {
width: 100%;
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 8px 10px;
font-size: 13px;
font-weight: 500;
font-family: 'Plus Jakarta Sans', sans-serif;
color: var(--text-primary);
background: var(--bg);
outline: none;
transition: border-color var(--t-fast);
}
.iet-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,70,241,0.15); }
.iet-hint {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 6px;
font-weight: 500;
}
/* Badges / Pills */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.02em;
}
.badge-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
/* Status L1 */
.badge--live { background: var(--green-soft); color: var(--green); }
.badge--live .badge-dot { background: var(--green); }
.badge--primary { background: var(--accent-soft); color: var(--accent); }
.badge--primary .badge-dot { background: var(--accent); }
.badge--inprogress { background: var(--amber-soft); color: var(--amber); }
.badge--inprogress .badge-dot { background: var(--amber); }
.badge--waiting-cx { background: var(--teal-soft); color: var(--teal); }
.badge--waiting-cx .badge-dot { background: var(--teal); }
.badge--escalated { background: var(--red-soft); color: var(--red); }
.badge--escalated .badge-dot { background: var(--red); }
.badge--partial { background: var(--teal-soft); color: var(--teal); }
.badge--partial .badge-dot { background: var(--teal); }
.badge--backlog { background: var(--neutral-soft); color: var(--neutral); }
.badge--backlog .badge-dot { background: var(--neutral); }
/* Segment */
.badge--enterprise { background: var(--primary-soft); color: var(--primary); }
.badge--midmarket { background: var(--accent-soft); color: var(--accent); }
.badge--mea { background: var(--amber-soft); color: var(--amber); }
.badge--smb { background: var(--green-soft); color: var(--green); }
.badge--us { background: var(--teal-soft); color: var(--teal); }
/* Impact */
.badge--high { background: var(--red-soft); color: var(--red); }
.badge--med { background: var(--amber-soft); color: var(--amber); }
.badge--pebble { background: var(--accent-soft); color: var(--accent); }
.badge--low { background: var(--neutral-soft); color: var(--neutral); }
/* ── Risk Indicator: pill colors ─────────────────────────────── */
.badge--risk-critical {
background: var(--red-soft);
color: var(--red);
position: relative;
overflow: hidden;
isolation: isolate;
transform-origin: center;
}
.badge--risk-high { background: var(--orange-soft); color: var(--orange); }
.badge--risk-moderate { background: var(--yellow-soft); color: var(--yellow); }
.badge--risk-watch { background: var(--green-soft); color: var(--green); }
/* Dark mode: brighten high/moderate text for contrast on the translucent soft bg */
body.dark .badge--risk-high { color: #FB923C; }
body.dark .badge--risk-moderate { color: #FACC15; }
.badge--risk-none { background: transparent; color: var(--text-tertiary); font-weight: 500; }
/* Heat bar segments — color via currentColor from parent badge */
.risk-heat-bar { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-right: 4px; }
.risk-heat-bar__seg { width: 4px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.risk-heat-bar__seg--fill { background: currentColor; opacity: 0.85; }
.risk-heat-bar__seg--empty { background: currentColor; opacity: 0.18; }
/* Risk breakdown in detail modal */
.dm-risk-breakdown { margin-top: 12px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius-m); border: 1px solid var(--border); border-top-width: 3px; }
.dm-risk-breakdown--critical { border-top-color: #DC2626; }
.dm-risk-breakdown--high { border-top-color: #EA580C; }
.dm-risk-breakdown--moderate { border-top-color: #EAB308; }
.dm-risk-breakdown--watch { border-top-color: #6366F1; }
.dm-risk-breakdown__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dm-risk-breakdown__title { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.dm-risk-breakdown__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 12.5px; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.dm-risk-breakdown__row:last-of-type { border-bottom: none; }
.dm-risk-breakdown__pts { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.dm-risk-breakdown__pts--critical { background: rgba(220,38,38,.1); color: #DC2626; }
.dm-risk-breakdown__pts--high { background: rgba(234,88,12,.1); color: #EA580C; }
.dm-risk-breakdown__pts--moderate { background: rgba(234,179,8,.1); color: #EAB308; }
.dm-risk-breakdown__pts--watch { background: rgba(99,102,241,.1); color: #6366F1; }
.dm-risk-breakdown__total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.dm-risk-breakdown__total-score { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dm-risk-breakdown--critical .dm-risk-breakdown__total-score { color: #DC2626; }
.dm-risk-breakdown--high .dm-risk-breakdown__total-score { color: #EA580C; }
.dm-risk-breakdown--moderate .dm-risk-breakdown__total-score { color: #EAB308; }
.dm-risk-breakdown--watch .dm-risk-breakdown__total-score { color: #6366F1; }
/* Risk pill hover popover */
#riskPillPopover {
position: fixed;
z-index: 250;
display: none;
min-width: 230px;
max-width: 300px;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
padding: 0;
overflow: hidden;
pointer-events: none;
will-change: transform, opacity;
}
.rpp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px 8px; border-bottom: 1px solid var(--border); gap: 8px; }
.rpp-score { font-size: 11px; font-weight: 700; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpp-signals { padding: 8px 13px; display: flex; flex-direction: column; gap: 2px; }
.rpp-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-primary); padding: 2px 0; gap: 8px; }
.rpp-pts { font-size: 11.5px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpp-total { display: flex; justify-content: space-between; align-items: center; padding: 7px 13px 10px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
body.dark #riskPillPopover { box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2); }
/* Status L2 chip */
.status2-chip {
display: inline-block;
padding: 2px 9px;
border-radius: var(--radius-s);
font-size: 11.5px;
font-weight: 600;
background: var(--surface-2);
color: var(--text-secondary);
border: 1px solid var(--border);
white-space: nowrap;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
.status2-chip--neutral {
background: var(--surface-2);
color: var(--text-secondary);
border-color: var(--border);
}
.status2-chip--good {
background: rgba(22,163,74,.12);
color: var(--green);
border-color: rgba(22,163,74,.2);
}
.status2-chip--track {
background: rgba(8,145,178,.12);
color: var(--teal);
border-color: rgba(8,145,178,.2);
}
.status2-chip--warn {
background: rgba(217,119,6,.12);
color: var(--amber);
border-color: rgba(217,119,6,.2);
}
.status2-chip--risk {
background: rgba(220,38,38,.1);
color: var(--red);
border-color: rgba(220,38,38,.18);
}
/* ARR */
.arr-value {
font-size: 13px;
color: var(--text-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Expiry */
.expiry-value { font-size: 12.5px; color: var(--text-secondary); font-weight: 500; }
.expiry-value--urgent { color: var(--red); font-weight: 700; }
.expiry-value--soon { color: var(--amber); font-weight: 600; }
/* QoL #8 — Smart Deadline Badges */
.deadline-cell {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.dlb {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.03em;
padding: 1px 6px;
border-radius: 999px;
}
.dlb--urgent { background: var(--red-soft); color: var(--red); }
.dlb--warn { background: var(--amber-soft); color: var(--amber); }
.dlb--soon { background: var(--amber-soft); color: var(--amber); opacity: 0.8; }
.dlb--ok { background: var(--surface-2); color: var(--text-secondary); }
/* ClickUp link */
.cu-task-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--primary-soft);
border-radius: var(--radius-pill);
color: var(--primary);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background var(--t-fast) ease;
letter-spacing: 0.01em;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cu-task-pill--named {
font-size: 11.5px;
font-weight: 500;
background: var(--surface-2);
color: var(--text-primary);
border: 1px solid var(--border);
}
.cu-task-pill--named:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.cu-task-pill:not(.cu-task-pill--named):hover { background: rgba(124,70,241,0.18); }
.cu-task-pill svg { width: 11px; height: 11px; flex-shrink: 0; }
/* legacy alias */
.clickup-link { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
/* Table empty */
/* Legacy — kept for compat; actual empty state now lives inside tbody */
.table-empty { display: none; }
.empty-icon svg { width: 40px; height: 40px; opacity: 0.4; }
/* In-table empty state — spans all columns inside tbody */
.table-empty-row { border: none !important; }
.table-empty-cell {
padding: 0 !important;
background: var(--surface) !important;
border: none !important;
}
.table-empty-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 56px 24px;
text-align: center;
}
.table-empty-icon {
width: 80px;
height: 80px;
margin-bottom: 8px;
animation: table-empty-float 3s ease-in-out infinite;
}
@keyframes table-empty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.table-empty-title {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.1px;
}
.table-empty-sub {
font-size: 12.5px;
color: var(--text-tertiary);
font-weight: 500;
max-width: 300px;
line-height: 1.5;
}
.table-empty-clear {
margin-top: 4px;
font-size: 13px;
font-weight: 600;
color: var(--primary);
}
.cx-empty-motion {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
}
.cx-motion-slot {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cx-motion-slot--sm { width: 18px; height: 18px; }
.cx-motion-slot--lg { width: 72px; height: 72px; }
.cx-motion-slot svg {
width: 100%;
height: 100%;
}
.cx-motion-fallback {
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cx-motion-fallback svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.cx-motion-fallback--violet,
.cx-motion-fallback--accent { color: var(--primary); }
.cx-motion-fallback--success,
.cx-motion-fallback--green { color: var(--green); }
.cx-motion-fallback--warning,
.cx-motion-fallback--amber { color: var(--amber); }
.cx-motion-fallback--danger,
.cx-motion-fallback--red { color: var(--red); }
.cx-motion-fallback--teal { color: var(--teal); }
/* =============================================
Placeholder Views
============================================= */
.placeholder-view {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
padding: 48px;
}
.placeholder-icon svg { width: 56px; height: 56px; color: var(--primary); opacity: 0.4; }
.placeholder-view h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.placeholder-view p { font-size: 14px; color: var(--text-secondary); text-align: center; max-width: 380px; line-height: 1.65; }
.placeholder-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; width: 100%; max-width: 460px; }
.placeholder-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 14px 18px;
font-size: 13.5px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
box-shadow: var(--shadow-sm);
}
.placeholder-card--error { border-left: 3px solid var(--red); }
.chip--error-sm {
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
background: var(--red-soft);
color: var(--red);
border-radius: var(--radius-pill);
}
/* =============================================
Escalations + Notification Center
============================================= */
.escalations-page,
.notifications-page {
flex: 1;
overflow-y: auto;
padding: 24px;
background:
radial-gradient(circle at top right, rgba(124,70,241,.08), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,.45), transparent 28%),
var(--bg);
}
body.dark .escalations-page,
body.dark .notifications-page {
background:
radial-gradient(circle at top right, rgba(124,70,241,.08), transparent 30%),
var(--bg);
}
.esc-hero {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 18px;
}
.esc-hero-top,
.esc-hero-workspace {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
gap: 18px;
align-items: stretch;
}
.esc-hero-workspace {
align-items: start;
}
.notif-center-hero {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
gap: 18px;
margin-bottom: 18px;
}
.esc-hero-main,
.notif-center-main,
.esc-side-card,
.notif-center-side,
.esc-kpi-card,
.esc-queue-shell,
.esc-table-shell,
.notif-center-shell {
background: color-mix(in srgb, var(--surface) 92%, white 8%);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.esc-hero-main,
.notif-center-main {
padding: 22px 24px;
position: relative;
overflow: hidden;
}
.esc-hero-main::before,
.notif-center-main::before {
content: '';
position: absolute;
inset: auto -50px -50px auto;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(124,70,241,.14), transparent 70%);
}
.esc-kicker,
.notif-kicker {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.esc-title-row,
.notif-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.esc-title-row h2,
.notif-title-row h2 {
font-size: 30px;
line-height: 1.02;
letter-spacing: -.04em;
}
.esc-subtitle,
.notif-subtitle {
margin-top: 8px;
color: var(--text-secondary);
max-width: 640px;
line-height: 1.6;
font-size: 13.5px;
}
.esc-hero-actions,
.notif-hero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.esc-hero-motion-shell {
min-height: 132px;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, white 10%), color-mix(in srgb, var(--surface-2) 82%, white 18%));
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
}
.esc-hero-motion {
width: clamp(72px, 9vw, 96px);
height: clamp(72px, 9vw, 96px);
}
.esc-hero-motion-copy {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 320px;
}
.esc-hero-motion-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.esc-hero-motion-copy strong {
font-size: 17px;
line-height: 1.15;
letter-spacing: -.02em;
color: var(--text-primary);
}
.esc-hero-motion-copy p {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.esc-action-brief,
.esc-queue-snapshot {
min-height: 100%;
}
.esc-snapshot-intro {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 14px 13px;
border-radius: var(--radius-l);
border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border) 88%);
background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 18%, var(--surface) 82%), color-mix(in srgb, var(--surface) 92%, white 8%));
}
.esc-snapshot-intro--critical { border-color: rgba(220,38,38,.16); }
.esc-snapshot-intro--high { border-color: rgba(217,119,6,.18); }
.esc-snapshot-intro--watch { border-color: rgba(124,70,241,.18); }
.esc-snapshot-intro--calm { border-color: rgba(22,163,74,.14); }
.esc-snapshot-intro-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
}
.esc-snapshot-intro-title {
font-size: 15px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -.02em;
color: var(--text-primary);
}
.esc-snapshot-intro-body {
font-size: 12px;
line-height: 1.55;
color: var(--text-secondary);
}
.esc-snapshot-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
.esc-snapshot-row {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
border-radius: var(--radius-m);
background: var(--surface-2);
}
.esc-snapshot-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.esc-snapshot-value {
font-size: 14px;
font-weight: 800;
color: var(--text-primary);
}
.esc-snapshot-meta {
font-size: 11.5px;
color: var(--text-secondary);
line-height: 1.45;
}
.esc-kpi-grid,
.notif-center-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.esc-kpi-card {
padding: 18px 18px 16px;
position: relative;
overflow: hidden;
}
.esc-kpi-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
}
.esc-kpi-card--risk::before { background: var(--red); }
.esc-kpi-card--amber::before { background: var(--amber); }
.esc-kpi-card--teal::before { background: var(--teal); }
.esc-kpi-card--violet::before { background: var(--primary); }
.esc-kpi-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.esc-kpi-value {
display: block;
margin-top: 10px;
font-size: 28px;
font-weight: 800;
letter-spacing: -.04em;
}
.esc-kpi-sub {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.esc-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 22px;
}
.esc-filter-pills,
.notif-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.esc-filter-pill,
.notif-filter-pill {
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-secondary);
border-radius: var(--radius-pill);
padding: 8px 14px;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.esc-filter-pill strong,
.notif-filter-pill strong {
font-size: 11px;
color: inherit;
}
.esc-filter-pill:hover,
.notif-filter-pill:hover {
border-color: var(--border-strong);
background: var(--surface-2);
}
.esc-filter-pill.active,
.notif-filter-pill.active {
background: var(--primary-soft);
border-color: rgba(124,70,241,.26);
color: var(--primary);
}
.esc-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
gap: 18px;
align-items: start;
}
.esc-queue-shell,
.esc-table-shell,
.notif-center-shell,
.esc-side-card,
.notif-center-side {
padding: 18px;
}
.esc-shell-head,
.notif-shell-head,
.esc-side-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.esc-shell-head {
align-items: flex-start;
}
.esc-shell-title,
.notif-shell-title,
.esc-side-title {
font-size: 15px;
font-weight: 800;
letter-spacing: -.02em;
}
.esc-shell-sub,
.notif-shell-sub {
font-size: 12px;
color: var(--text-secondary);
}
.esc-inline-link {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
color: var(--primary);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
padding: 2px 0;
white-space: nowrap;
}
.esc-inline-link svg {
width: 14px;
height: 14px;
}
.esc-queue-list,
.notif-center-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.esc-queue-shell {
display: flex;
flex-direction: column;
min-height: 0;
}
.esc-queue-list {
flex: 1;
min-height: 0;
max-height: clamp(360px, 52vh, 620px);
overflow-y: auto;
padding-right: 4px;
scrollbar-gutter: stable;
}
.esc-queue-list::-webkit-scrollbar {
width: 4px;
}
.esc-queue-list::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 999px;
}
.esc-card {
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 14px;
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, white 8%), var(--surface));
box-shadow: var(--shadow-sm);
}
.esc-card--critical { border-color: rgba(220,38,38,.18); }
.esc-card--high { border-color: rgba(217,119,6,.2); }
.esc-card-top,
.esc-card-meta,
.esc-card-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.esc-card-top { align-items: flex-start; }
.esc-customer {
font-size: 16px;
font-weight: 800;
letter-spacing: -.03em;
}
.esc-card-arr {
font-size: 14px;
font-weight: 800;
color: var(--text-primary);
}
.esc-card-meta {
margin-top: 8px;
flex-wrap: wrap;
justify-content: flex-start;
color: var(--text-secondary);
font-size: 11px;
}
.esc-card-signals {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.esc-signal {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: var(--radius-pill);
font-size: 10.5px;
font-weight: 700;
}
.esc-signal--risk { background: rgba(220,38,38,.1); color: var(--red); }
.esc-signal--warn { background: rgba(217,119,6,.12); color: var(--amber); }
.esc-signal--track { background: rgba(8,145,178,.12); color: var(--teal); }
.esc-context {
margin-top: 10px;
padding: 9px 11px;
border-radius: var(--radius-m);
background: var(--surface-2);
color: var(--text-secondary);
font-size: 11.5px;
line-height: 1.5;
}
.esc-card-actions {
margin-top: 12px;
flex-wrap: wrap;
justify-content: flex-start;
gap: 8px;
}
.esc-card-actions .btn-filled,
.esc-card-actions .btn-outlined {
padding: 7px 10px;
font-size: 11.5px;
}
.esc-card-actions svg {
width: 13px;
height: 13px;
}
.esc-playbook-summary {
display: flex;
flex-direction: column;
gap: 7px;
padding: 14px 14px 12px;
margin-top: 2px;
border-radius: var(--radius-l);
background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 22%, var(--surface) 78%), color-mix(in srgb, var(--surface) 90%, white 10%));
border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border) 88%);
}
.esc-playbook-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
}
.esc-playbook-title {
font-size: 15px;
font-weight: 800;
line-height: 1.22;
letter-spacing: -.02em;
color: var(--text-primary);
}
.esc-playbook-body {
font-size: 12px;
line-height: 1.55;
color: var(--text-secondary);
}
.esc-playbook-focus {
font-size: 11px;
font-weight: 700;
color: var(--text-tertiary);
}
.esc-playbook-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.esc-playbook-step {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 11px;
border-radius: var(--radius-m);
background: var(--surface-2);
}
.esc-playbook-step-num {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
.esc-playbook-step-text {
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
}
.esc-playbook-draft {
margin-top: 12px;
padding: 11px 12px;
border-radius: var(--radius-m);
background: color-mix(in srgb, var(--surface-2) 84%, white 16%);
border: 1px solid var(--border);
}
.esc-playbook-draft-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.esc-playbook-draft p {
white-space: pre-wrap;
font-size: 11.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.esc-playbook-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.esc-side-stack {
display: flex;
flex-direction: column;
gap: 18px;
}
.esc-owner-list,
.esc-mini-list,
.notif-mini-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.esc-owner-row,
.esc-mini-row,
.notif-mini-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12.5px;
}
.esc-owner-name,
.esc-mini-label,
.notif-mini-label {
color: var(--text-primary);
font-weight: 600;
}
.esc-owner-meta,
.esc-mini-meta,
.notif-mini-meta {
color: var(--text-secondary);
font-size: 11.5px;
}
.esc-owner-bar {
height: 8px;
border-radius: var(--radius-pill);
background: var(--surface-2);
overflow: hidden;
margin-top: 6px;
}
.esc-owner-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--accent) 60%, var(--primary) 40%));
}
.esc-table-shell { margin-top: 22px; }
.esc-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-l); }
.esc-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--surface);
}
.esc-table th,
.esc-table td {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.esc-table th {
position: sticky;
top: 0;
background: var(--surface-2);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
z-index: 1;
}
.esc-table td {
font-size: 12px;
line-height: 1.45;
color: var(--text-secondary);
}
.esc-table td strong {
display: inline-block;
font-size: 12.5px;
color: var(--text-primary);
}
.esc-table td .esc-mini-meta {
margin-top: 4px;
font-size: 10.5px;
}
.esc-table td .esc-signal {
font-size: 10px;
padding: 3px 7px;
margin: 0 5px 5px 0 !important;
}
.esc-table tr:last-child td { border-bottom: none; }
.esc-table tr:hover { background: rgba(124,70,241,.04); }
.esc-link-btn {
color: var(--primary);
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
}
.esc-empty,
.notif-empty {
padding: 28px 16px;
text-align: center;
color: var(--text-secondary);
border: 1px dashed var(--border);
border-radius: var(--radius-l);
background: color-mix(in srgb, var(--surface) 88%, white 12%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.notif-empty--hub {
min-height: 220px;
}
.notif-empty-motion,
.esc-empty-motion {
width: 62px;
height: 62px;
}
.notif-empty-copy {
display: flex;
flex-direction: column;
gap: 5px;
max-width: 360px;
}
.notif-empty-copy strong {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.notif-empty-copy p {
font-size: 12.5px;
line-height: 1.6;
color: var(--text-secondary);
}
/* ── Score badge ─────────────────────────────────── */
.esc-score {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 11px;
font-weight: 800;
flex-shrink: 0;
}
.esc-score--sm { width: 24px; height: 24px; font-size: 10px; }
.esc-score--critical { background: rgba(220,38,38,.14); color: var(--red); }
.esc-score--high { background: rgba(217,119,6,.14); color: var(--amber); }
.esc-score--watch { background: rgba(124,70,241,.12); color: var(--primary); }
/* ── Customer row (name + score badge side by side) ─ */
.esc-customer-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
/* ── Swimlane grouping ───────────────────────────── */
.esc-swimlane { display: flex; flex-direction: column; gap: 10px; }
.esc-swimlane + .esc-swimlane { margin-top: 6px; }
.esc-swimlane-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: var(--radius-m);
}
.esc-swimlane-header--critical { background: rgba(220,38,38,.09); color: var(--red); }
.esc-swimlane-header--high { background: rgba(217,119,6,.09); color: var(--amber); }
.esc-swimlane-header--watch { background: rgba(124,70,241,.08); color: var(--primary); }
.esc-swimlane-count {
background: rgba(255,255,255,.2);
border-radius: 10px;
padding: 0 6px;
font-weight: 700;
font-size: 11px;
}
/* ── Sort pills ──────────────────────────────────── */
.esc-sort-pills {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.esc-sort-label {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
.esc-sort-pill {
padding: 4px 11px;
border-radius: 20px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.esc-sort-pill:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-primary); }
.esc-sort-pill.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
/* ── Active tier chip (donut drill-down indicator) ── */
.esc-tier-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
}
.esc-tier-chip--critical { background: rgba(220,38,38,.12); color: var(--red); border: 1px solid rgba(220,38,38,.3); }
.esc-tier-chip--high { background: rgba(217,119,6,.12); color: var(--amber); border: 1px solid rgba(217,119,6,.3); }
.esc-tier-chip--watch { background: rgba(124,70,241,.1); color: var(--primary); border: 1px solid rgba(124,70,241,.25); }
.esc-tier-chip-clear {
background: none; border: none; cursor: pointer;
font-size: 12px; line-height: 1; padding: 0 1px;
opacity: .7; color: inherit;
}
.esc-tier-chip-clear:hover { opacity: 1; }
/* ── Charts row (ARR donut + expiry timeline) ─────── */
.esc-charts-row {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 14px;
margin-bottom: 20px;
}
.esc-chart-shell {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 16px 18px;
}
.esc-runway-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 12px;
}
.esc-runway-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
border: 1px solid transparent;
cursor: pointer;
transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
font-family: inherit;
}
.esc-runway-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.esc-runway-chip.active { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent); }
.esc-runway-chip__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
border-radius: 999px;
background: color-mix(in srgb, currentColor 12%, white 88%);
color: inherit;
font-size: 9px;
font-weight: 800;
letter-spacing: .02em;
}
.esc-runway-chip--neutral { background: var(--surface-2); color: var(--text-secondary); border-color: var(--border); }
.esc-runway-chip--danger { background: rgba(220,38,38,.10); color: var(--red); border-color: rgba(220,38,38,.18); }
.esc-runway-chip--amber { background: rgba(245,158,11,.12); color: var(--amber); border-color: rgba(245,158,11,.18); }
.esc-runway-chip--warn { background: rgba(217,119,6,.10); color: var(--amber); border-color: rgba(217,119,6,.16); }
.esc-runway-chip--calm { background: rgba(22,163,74,.09); color: var(--green); border-color: rgba(22,163,74,.16); }
.esc-chart-tip {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 150px;
}
.esc-chart-tip__cust {
font-size: 12px;
font-weight: 800;
color: var(--text-primary);
}
.esc-chart-tip__days {
font-size: 14px;
font-weight: 800;
color: var(--primary);
}
.esc-chart-tip__meta {
font-size: 11.5px;
color: var(--text-secondary);
line-height: 1.45;
}
.esc-queue-shell .esc-shell-head {
margin-bottom: 10px;
}
.esc-queue-shell .esc-shell-sub {
max-width: 420px;
}
.esc-grid {
margin-top: 4px;
}
@media (max-width: 900px) {
.esc-hero-top,
.esc-hero-workspace {
grid-template-columns: 1fr;
}
.esc-charts-row { grid-template-columns: 1fr; }
.esc-runway-legend { gap: 6px; }
}
.notif-panel {
width: 372px;
}
.notif-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.notif-list {
max-height: 360px;
overflow-y: auto;
}
.notif-item {
align-items: flex-start;
}
.notif-item-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
width: 100%;
}
.notif-item-cta {
flex-shrink: 0;
color: var(--primary);
font-size: 11px;
font-weight: 700;
}
.notif-item-meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
color: var(--text-tertiary);
font-size: 11px;
}
.notif-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: .55;
}
.notif-center-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
}
.notif-center-shell .notif-list {
max-height: none;
}
.notif-center-card {
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 14px;
background: var(--surface);
}
.notif-center-card + .notif-center-card {
margin-top: 12px;
}
@media (max-width: 1100px) {
.esc-hero,
.notif-center-hero,
.esc-grid,
.notif-center-grid {
grid-template-columns: 1fr;
}
.esc-hero-motion-shell {
min-height: 0;
}
.esc-kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.escalations-page,
.notifications-page {
padding: 16px;
}
.tl-group-strip {
margin: 0 16px 12px;
}
.tl-group-strip__toggle {
padding: 12px;
}
.tl-group-strip__toggle-meta {
gap: 8px;
}
.tl-group-strip__metric {
min-width: 70px;
padding: 4px 8px;
}
.tl-group-strip__chips {
width: 100%;
padding: 10px 12px 12px;
}
.esc-kpi-grid {
grid-template-columns: 1fr;
}
.esc-hero-motion-shell {
align-items: flex-start;
flex-direction: column;
}
.notif-panel {
right: 12px;
left: 12px;
top: 68px;
width: auto;
}
}
/* =============================================
Detail Modal (3 tabs)
============================================= */
.dm-overlay {
position: fixed; inset: 0;
background: rgba(15,14,20,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 100;
}
.dm-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.dm-overlay--closing { animation: cmd-overlay-out 160ms ease forwards !important; }
/* ── Shared spotlight keyframes (used by dm, dialog, col-mgr) ── */
@keyframes modal-spotlight-in {
0% { opacity: 0; transform: translate(-50%, -46%) scale(0.86); }
28% { opacity: 1; }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes modal-spotlight-out {
0% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(0.88); }
}
.dm {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* resting center — animation overrides on show */
background: var(--surface);
border-radius: var(--radius-xl);
width: 880px;
max-width: 96vw;
max-height: 88vh;
display: flex;
flex-direction: column;
z-index: 101;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
/* Opening — animation holds from-state via fill:both, so no display-flash */
.dm:not(.hidden) {
will-change: transform, opacity;
animation: modal-spotlight-in 440ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Closing — JS adds class, then .hidden after 210ms */
.dm--closing {
will-change: transform, opacity;
animation: modal-spotlight-out 200ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}
.dm-header {
padding: 22px 26px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.dm-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.dm-title-wrap {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
}
.dm-title {
font-size: 20px;
font-weight: 800;
letter-spacing: -0.4px;
color: var(--text-primary);
line-height: 1.3;
word-break: break-word;
flex: 1;
min-width: 0;
}
.dm-save-status {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.dm-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dm-arr-inline { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
/* Tabs */
.dm-tabs {
display: flex;
position: relative;
border-bottom: 1px solid var(--border);
padding: 0 26px;
flex-shrink: 0;
gap: 0;
}
.dm-tab {
padding: 12px 18px;
font-size: 13.5px;
font-weight: 600;
color: var(--text-secondary);
position: relative;
transition: color var(--t-fast) ease;
}
.dm-tab:hover { color: var(--text-primary); }
.dm-tab.active { color: var(--primary); }
.dm-tab.active::after {
content: '';
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 2px;
background: var(--primary);
border-radius: 2px 2px 0 0;
}
/* Body is the scroll container — reliable with max-height flex containers */
.dm-body {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.dm-body::-webkit-scrollbar { width: 5px; }
.dm-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.dm-panel { display: none; padding: 24px 26px 32px; }
.dm-panel.active { display: block; }
/* Details grid */
.dm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.dm-cell {
padding: 16px 20px 16px 0;
border-bottom: 1px solid var(--border);
}
.dm-cell:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--border); }
.dm-cell:nth-last-child(1),
.dm-cell:nth-last-child(2) { border-bottom: none; }
/* PER detail panel — Problem Statement + Remarks top pair */
.per-dm-ps-text {
white-space: pre-wrap; font-size: 13px; line-height: 1.65;
max-height: 220px; overflow-y: auto; padding-right: 4px;
}
.per-dm-remarks-col {
overflow-y: auto; max-height: 280px;
}
/* PER detail panel — section headers + HCR link cards */
.per-dm-section-header {
font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-tertiary); padding: 18px 0 8px;
border-top: 1px solid var(--border); margin-top: 4px;
}
.per-dm-section-header:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.per-dm-hcr-links { display: flex; flex-direction: column; gap: 6px; }
.per-dm-hcr-card {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--radius-m);
border: 1px solid var(--border); background: var(--surface-2);
}
.per-dm-hcr-card-body { flex: 1; min-width: 0; }
.per-dm-hcr-card-customers { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 3px; }
.per-dm-hcr-card-meta { font-size: 11px; color: var(--text-secondary); }
.per-dm-hcr-card-link { font-size: 11px; color: var(--primary); flex-shrink: 0; }
/* =============================================
Working Remarks Thread
============================================= */
.remark-add-form {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 16px;
}
.remark-add-input {
flex: 1;
resize: none;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 9px 12px;
font-size: 13px;
font-weight: 500;
font-family: inherit;
color: var(--text-primary);
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
min-height: 56px;
}
.remark-add-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(124,70,241,0.12);
}
.remark-add-btn {
flex-shrink: 0;
padding: 8px 14px;
font-size: 12.5px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
}
.remark-today-stamp {
font-size: 10px;
font-weight: 600;
opacity: 0.7;
letter-spacing: 0.02em;
font-family: 'Roboto Mono', monospace;
}
.remark-thread {
display: flex;
flex-direction: column;
gap: 0;
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
padding-right: 4px; /* breathing room for scrollbar */
}
.remark-entry {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 0;
border-bottom: 1px dashed var(--border);
animation: fadeUp 250ms var(--ease) both;
}
.remark-entry:last-child { border-bottom: none; }
.remark-entry-date {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--primary);
background: var(--primary-soft);
padding: 2px 8px;
border-radius: var(--radius-pill);
width: fit-content;
}
.remark-entry-text {
font-size: 13px;
color: var(--text-primary);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.remark-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 3px;
word-break: break-all;
}
.remark-link:hover { text-decoration: underline; }
.remark-link svg { flex-shrink: 0; }
.remark-empty {
font-size: 13px;
color: var(--text-tertiary);
font-style: italic;
padding: 8px 0;
}
.remark-show-more {
margin-top: 8px;
align-self: flex-start;
font-size: 12.5px;
padding: 6px 10px;
}
.dm-cell-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 7px;
}
.dm-cell-value {
font-size: 13.5px;
color: var(--text-primary);
font-weight: 500;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
}
.dm-cell-value--muted { color: var(--text-tertiary); font-style: italic; font-weight: 400; white-space: normal; }
.dm-cell-value--warning { color: var(--amber); font-weight: 700; white-space: normal; }
.dm-cell-value--person { display: flex; align-items: center; gap: 8px; white-space: normal; }
.dm-os-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--accent);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: opacity 150ms;
}
.dm-os-link:hover { opacity: 0.75; text-decoration: underline; }
.dm-os-link svg { width: 13px; height: 13px; }
.dm-cu-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--primary-soft);
border-radius: var(--radius-m);
color: var(--primary);
font-size: 12px;
font-weight: 700;
cursor: pointer;
border: none;
transition: background var(--t-fast) ease;
font-family: inherit;
}
.dm-cu-btn:hover { background: rgba(124,70,241,0.2); }
.dm-cu-btn svg { width: 13px; height: 13px; }
/* Edit tab */
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
/* Audit log */
.audit-timeline { display: flex; flex-direction: column; }
.audit-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.audit-entry:last-child { border-bottom: none; }
.audit-line { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 24px; }
.audit-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
margin-top: 4px;
}
.audit-dot--error { background: var(--red); }
.audit-dot--success { background: var(--green); }
.audit-dot--warning { background: var(--amber); }
.audit-connector { width: 1px; flex: 1; background: var(--border); margin-top: 4px; min-height: 20px; }
.audit-content { flex: 1; }
.audit-action { font-size: 13.5px; color: var(--text-primary); font-weight: 600; margin-bottom: 3px; }
.audit-change-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 7px 0 2px;
}
.audit-change-row {
display: grid;
grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.audit-field {
font-size: 11px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.audit-delta {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.45;
word-break: break-word;
}
.audit-delta-old,
.audit-delta-new {
display: inline;
}
.audit-delta-arrow {
display: inline-block;
margin: 0 6px;
color: var(--text-tertiary);
}
.audit-delta-empty {
color: var(--text-tertiary);
font-style: italic;
}
.audit-meta { font-size: 12px; color: var(--text-tertiary); }
.audit-user { color: var(--primary); font-weight: 600; }
/* Footer */
.dm-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 16px 26px;
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.dm-save-btn { background: var(--primary); }
/* =============================================
Add Request Dialog
============================================= */
.dialog-overlay {
position: fixed; inset: 0;
background: rgba(15,14,20,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 200;
}
.dialog-overlay:not(.hidden) { animation: cmd-overlay-in 200ms ease both; }
.dialog-overlay--closing { animation: cmd-overlay-out 160ms ease forwards !important; }
.dialog {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* resting center */
background: var(--surface);
border-radius: var(--radius-xl);
width: 600px;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
z-index: 201;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
}
.dialog:not(.hidden) {
will-change: transform, opacity;
animation: modal-spotlight-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dialog--closing {
will-change: transform, opacity;
animation: modal-spotlight-out 190ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}
/* Layered modal: detail opened from within add form */
.dm--elevated { z-index: 400 !important; }
.dm-overlay--elevated { z-index: 399 !important; }
/* Add form dims + yields pointer events while detail is reviewed */
.dialog--behind { opacity: 0.4; pointer-events: none; transition: opacity 160ms var(--ease); }
/* Backdrop suppressed — prevents accidental add-form close during detail review */
.dialog-overlay--behind { pointer-events: none !important; }
/* Submit button amber warn state when unresolved dupe callout is active */
[data-dupe-warn] { box-shadow: 0 0 0 2px var(--amber) !important; }
[data-dupe-warn][disabled] {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none;
filter: grayscale(0.3);
}
.dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border);
}
.dialog-title { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.dialog-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.dialog-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 16px 24px;
border-top: 1px solid var(--border);
}
/* Forms */
.form-row { display: flex; gap: 14px; margin-bottom: 14px; }
.form-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.form-field--full { flex: 1 1 100%; }
.form-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-width: 0;
flex-wrap: wrap;
}
.form-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-secondary);
text-transform: uppercase;
}
.form-label-note {
font-size: 11px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--text-tertiary);
white-space: nowrap;
}
.tooltip-icon {
display: inline-block;
margin-left: 4px;
font-size: 11px;
font-style: normal;
text-transform: none;
letter-spacing: 0;
color: var(--text-tertiary);
cursor: default;
vertical-align: middle;
}
.form-row--assistable {
flex-wrap: wrap;
align-items: flex-start;
}
.form-field--assist {
flex: 1 1 100%;
gap: 0;
margin-top: -2px;
}
.form-assist {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 2px 2px 0;
}
.form-assist__text {
font-size: 11.5px;
line-height: 1.45;
color: var(--text-tertiary);
}
.form-assist__action {
flex-shrink: 0;
padding: 2px 0;
font-size: 11px;
font-weight: 700;
color: var(--primary);
white-space: nowrap;
}
.form-assist__action:hover {
background: transparent;
color: var(--primary-dark);
text-decoration: underline;
}
.form-assist[data-tone="warning"] .form-assist__text {
color: var(--amber);
}
.form-input,
.form-select {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 9px 12px;
color: var(--text-primary);
font-size: 13.5px;
font-weight: 500;
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
font-family: inherit;
}
.form-input:focus,
.form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(124,70,241,0.12);
background: var(--surface);
}
.form-input.error,
.form-select.error {
border-color: var(--red);
box-shadow: 0 0 0 2px rgba(220,38,38,0.12);
}
.form-error-msg {
display: block;
font-size: 11.5px;
font-weight: 600;
color: var(--red);
margin-top: 4px;
min-height: 0;
animation: fadeUp 150ms var(--ease) both;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239993AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
/* =============================================
Notification Panel
============================================= */
.notif-panel {
position: fixed;
top: 60px;
right: 24px;
width: 340px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
z-index: 50; /* below modals (101) — was 150 which blocked detail modal */
overflow: hidden;
animation: slideDown 200ms var(--ease);
}
.notif-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.notif-header h3 { font-size: 14.5px; font-weight: 700; }
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
display: flex;
gap: 12px;
padding: 13px 20px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background var(--t-fast);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item--unread { background: var(--primary-soft); }
body.dark .notif-item--unread { background: rgba(124,70,241,0.08); }
.notif-icon { flex-shrink: 0; margin-top: 2px; }
.notif-icon svg { width: 18px; height: 18px; }
.notif-icon--error { color: var(--red); }
.notif-icon--warning { color: var(--amber); }
.notif-icon--success { color: var(--green); }
.notif-body { display: flex; flex-direction: column; gap: 2px; }
.notif-body strong { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-body p { font-size: 12px; color: var(--text-secondary); }
.notif-body time { font-size: 11px; color: var(--text-tertiary); }
/* =============================================
Snackbar
============================================= */
.snackbar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: var(--text-primary);
color: var(--bg);
border-radius: var(--radius-l);
padding: 12px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-weight: 600;
box-shadow: var(--shadow-lg);
z-index: 300;
animation: snackIn 300ms var(--ease);
min-width: 260px;
}
body.dark .snackbar { background: #EEEAF8; color: #0F0E14; }
.snackbar[data-tone="success"] { background: #112918; color: #ECFFF2; }
.snackbar[data-tone="warning"] { background: #332212; color: #FFF4E6; }
.snackbar[data-tone="error"] { background: #34161A; color: #FFF1F3; }
.snackbar[data-tone="loading"] { background: #19182A; color: #F5F2FF; }
body.dark .snackbar[data-tone="success"] { background: #EAF9EF; color: #0F2919; }
body.dark .snackbar[data-tone="warning"] { background: #FFF4E4; color: #4F2F07; }
body.dark .snackbar[data-tone="error"] { background: #FFECEE; color: #53171D; }
body.dark .snackbar[data-tone="loading"] { background: #EEEAF8; color: #0F0E14; }
.snackbar-icon { color: currentColor; }
.snackbar-icon svg { width: 17px; height: 17px; }
.snackbar-msg { flex: 1; }
.snackbar-dismiss {
color: currentColor;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
background: none;
border: none;
font-family: inherit;
padding: 0;
opacity: 0.8;
}
.snackbar-dismiss:hover { opacity: 1; }
.snackbar-undo {
color: currentColor;
font-size: 11px;
font-weight: 800;
cursor: pointer;
background: none;
border: 1px solid currentColor;
border-radius: 4px;
font-family: inherit;
padding: 2px 7px;
opacity: 0.85;
letter-spacing: .04em;
text-transform: uppercase;
margin-right: 4px;
}
.snackbar-undo:hover { opacity: 1; }
/* =============================================
ClickUp Integration
============================================= */
/* Table cell */
.cu-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; max-width: 100%; overflow: hidden; }
.cu-status-badge {
display: inline-block;
padding: 2px 7px;
border-radius: var(--radius-xs);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
/* light mode: mix with white so tint is visible on white bg */
background: color-mix(in srgb, var(--cu-color, #607D8B) 14%, white);
color: color-mix(in srgb, var(--cu-color, #607D8B) 80%, #000);
border: 1px solid color-mix(in srgb, var(--cu-color, #607D8B) 35%, white);
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
body.dark .cu-status-badge {
background: color-mix(in srgb, var(--cu-color, #607D8B) 22%, #000);
color: color-mix(in srgb, var(--cu-color, #607D8B) 80%, #fff);
border-color: color-mix(in srgb, var(--cu-color, #607D8B) 40%, #000);
}
.cu-status-badge--lg { padding: 4px 12px; font-size: 11px; max-width: none; }
.cu-drift-icon {
display: inline-flex; align-items: center;
color: var(--amber); cursor: help; margin-left: 4px;
}
.cu-drift-icon svg { width: 13px; height: 13px; }
@keyframes cu-spin { to { transform: rotate(360deg); } }
.cu-spin { animation: cu-spin 0.9s linear infinite; display: inline-block; }
.cu-syncing-indicator { color: var(--text-tertiary); display: inline-flex; align-items: center; }
.cu-syncing-indicator svg { width: 13px; height: 13px; animation: cu-spin 0.9s linear infinite; }
.cu-tab-loading svg { animation: cu-spin 1s linear infinite; }
.cu-error-chip { font-size: 10px; color: var(--red); opacity: 0.75; }
/* Modal ClickUp tab */
.cu-tab-meta {
display: flex; align-items: center; gap: 10px;
padding-bottom: 14px; border-bottom: 1px solid var(--border);
flex-wrap: wrap; margin-bottom: 4px;
}
.cu-fetched-time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.cu-drift-banner {
display: flex; align-items: flex-start; gap: 8px;
padding: 10px 14px; border-radius: var(--radius-m);
margin-bottom: 14px; font-size: 13px; line-height: 1.4;
}
.cu-drift-banner svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.cu-drift-banner--warning { background: rgba(217,119,6,0.1); color: var(--amber); border: 1px solid rgba(217,119,6,0.25); }
.cu-drift-banner--error { background: rgba(220,38,38,0.08); color: var(--red); border: 1px solid rgba(220,38,38,0.2); }
body.dark .cu-drift-banner--warning { background: rgba(217,119,6,0.15); }
body.dark .cu-drift-banner--error { background: rgba(220,38,38,0.12); }
.cu-tab-drift-dot {
width: 6px; height: 6px;
background: var(--amber); border-radius: 50%;
display: inline-block; margin-left: 5px; vertical-align: middle;
}
.cu-eta-delta { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-xs); margin-left: 6px; }
.cu-eta-delta--late { background: rgba(220,38,38,0.1); color: var(--red); border: 1px solid rgba(220,38,38,0.2); }
.cu-eta-delta--early { background: rgba(22,163,74,0.1); color: var(--green); border: 1px solid rgba(22,163,74,0.2); }
.cu-date--urgent { color: var(--red); font-weight: 600; }
.cu-assignees { display: flex; gap: 8px; flex-wrap: wrap; }
.cu-assignee { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cu-assignee-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cu-assignee-avatar--initials {
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700; color: #fff;
}
.cu-custom-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-cf-item {
display: flex; flex-direction: column; gap: 1px;
background: var(--surface-2); border-radius: var(--radius-s);
border: 1px solid var(--border); padding: 5px 9px; min-width: 110px;
}
.cu-cf-name { font-size: 9px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.cu-cf-value { font-size: 12px; color: var(--text-primary); }
.cu-comments-section { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.cu-comments-header {
display: flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: 10px;
}
.cu-comments-header svg { width: 13px; height: 13px; }
.cu-comment {
padding: 9px 12px; background: var(--surface-2); border-radius: var(--radius-m);
margin-bottom: 6px; border-left: 3px solid var(--border-strong);
}
.cu-comment:last-child { margin-bottom: 0; }
.cu-comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cu-comment-meta strong { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.cu-comment-meta time { font-size: 11px; color: var(--text-tertiary); margin-left: auto; }
.cu-comment-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; white-space: pre-wrap; }
.cu-tab-loading,
.cu-tab-empty,
.cu-tab-error {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 40px 24px; color: var(--text-tertiary); text-align: center; font-size: 14px;
}
.cu-tab-loading svg,
.cu-tab-empty svg { width: 28px; height: 28px; color: var(--primary); opacity: 0.7; }
.cu-tab-error svg { width: 28px; height: 28px; color: var(--red); }
.cu-tab-hint { font-size: 12px; opacity: 0.7; }
/* ── PER ClickUp inline chip panel (table cell edit) ─────────────────────── */
.per-cu-url-panel {
position: fixed; z-index: 9100;
background: var(--surface); border: 1px solid var(--border-strong);
border-radius: var(--radius-l); box-shadow: var(--shadow-lg);
width: 320px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.per-cu-url-panel.hidden { display: none; }
.per-cu-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.per-cu-panel-title { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.per-cu-panel-x {
background: none; border: none; cursor: pointer; font-size: 14px;
color: var(--text-tertiary); padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.per-cu-panel-x:hover { background: var(--surface-2); color: var(--text-primary); }
.per-cu-chip-list { display: flex; flex-direction: column; gap: 4px; min-height: 28px; }
.per-cu-chip {
display: flex; align-items: center; gap: 6px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 6px; padding: 4px 8px; font-size: 11px;
}
.per-cu-chip-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: monospace; color: var(--primary); }
.per-cu-chip-del {
background: none; border: none; cursor: pointer; font-size: 11px;
color: var(--text-tertiary); padding: 1px 3px; border-radius: 3px; flex-shrink: 0; line-height: 1;
}
.per-cu-chip-del:hover { background: var(--red-soft, rgba(220,38,38,.1)); color: var(--red); }
.per-cu-chip-empty { font-size: 11px; color: var(--text-tertiary); padding: 4px 2px; font-style: italic; }
.per-cu-add-row { display: flex; gap: 6px; }
.per-cu-add-input {
flex: 1; font-size: 11px; font-family: monospace; padding: 5px 8px;
border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg, var(--surface-2));
color: var(--text-primary); outline: none;
}
.per-cu-add-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,70,241,.15); }
.per-cu-add-btn {
font-size: 11px; font-weight: 600; padding: 5px 10px;
background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-add-btn:hover { opacity: .85; }
.per-cu-panel-footer { display: flex; gap: 6px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border); }
.per-cu-cancel-btn {
font-size: 11px; padding: 5px 10px; border: 1px solid var(--border);
border-radius: 6px; cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-cancel-btn:hover { background: var(--surface-2); }
.per-cu-save-btn {
font-size: 11px; font-weight: 600; padding: 5px 12px;
background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-save-btn:hover { opacity: .85; }
/* ── PER ClickUp modal tab — task cards ──────────────────────────────────── */
.per-cu-tab-header {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.per-cu-tab-count { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.per-cu-refresh-all-btn {
font-size: 11px; padding: 4px 10px; border: 1px solid var(--border);
border-radius: 6px; cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-refresh-all-btn:hover { background: var(--surface-2); }
.per-cu-task-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.per-cu-task-card {
border: 1px solid var(--border); border-radius: var(--radius-l);
padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px;
}
.per-cu-task-card--loaded {
cursor: pointer;
transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.per-cu-task-card--loaded:hover {
border-color: rgba(124,70,241,.35); background: var(--surface-2);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.per-cu-task-card--loaded:focus-visible {
outline: 2px solid var(--primary); outline-offset: 2px;
}
.per-cu-task-card--loading { opacity: .65; }
.per-cu-task-card--error { border-left: 3px solid var(--red); }
.per-cu-task-card--unconfigured { border-style: dashed; opacity: .8; }
.per-cu-task-card-header {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.per-cu-task-id {
font-family: monospace; font-size: 10px; font-weight: 700; letter-spacing: .02em;
color: var(--text-tertiary); background: var(--surface-2);
padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.per-cu-task-open {
margin-left: auto; font-size: 11px; color: var(--primary);
text-decoration: none; font-weight: 600; white-space: nowrap; flex-shrink: 0; opacity: .8;
}
.per-cu-task-open:hover { text-decoration: underline; opacity: 1; }
.per-cu-task-loading-dot {
width: 8px; height: 8px; border-radius: 50%;
border: 2px solid var(--primary); border-top-color: transparent;
animation: cu-spin 0.8s linear infinite; display: inline-block;
}
.per-cu-task-loading-label { font-size: 11px; color: var(--text-tertiary); }
.per-cu-task-err-label { font-size: 11px; color: var(--red); font-weight: 600; }
.per-cu-task-url-hint { font-size: 11px; color: var(--text-tertiary); font-family: monospace; }
.per-cu-task-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.per-cu-task-meta-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 11px; color: var(--text-tertiary);
}
.per-cu-task-meta-item { display: inline-flex; align-items: center; }
.per-cu-meta-sep { margin: 0 2px; opacity: .4; }
.per-cu-expand-hint {
font-size: 11px; color: var(--text-tertiary); margin-top: 2px; align-self: flex-start;
transition: color 120ms;
}
.per-cu-task-card--loaded:hover .per-cu-expand-hint { color: var(--primary); }
.per-cu-task-btn {
align-self: flex-start; font-size: 11px; padding: 4px 10px;
border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; background: none; color: var(--text-secondary);
}
.per-cu-task-btn:hover { background: var(--surface-2); }
/* ── PER ClickUp expanded task detail ─────────────────────────────────────── */
.per-cu-expanded-header {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.per-cu-back-btn {
font-size: 12px; padding: 5px 10px; border: 1px solid var(--border);
border-radius: 6px; cursor: pointer; background: none;
color: var(--text-secondary); font-weight: 500; flex-shrink: 0;
}
.per-cu-back-btn:hover { background: var(--surface-2); color: var(--text-primary); }
/* ── PER ClickUp URL manager (bottom of ClickUp tab) ──────────────────────── */
.per-cu-url-manager {
border-top: 1px solid var(--border); padding-top: 14px;
display: flex; flex-direction: column; gap: 8px;
}
.per-cu-mgr-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.per-cu-mgr-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; }
.per-cu-mgr-chip {
display: flex; align-items: center; gap: 5px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 6px; padding: 3px 7px; font-size: 11px;
}
.per-cu-mgr-chip-label { font-family: monospace; color: var(--primary); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.per-cu-mgr-chip-del {
background: none; border: none; cursor: pointer; font-size: 10px;
color: var(--text-tertiary); padding: 1px 3px; border-radius: 3px; line-height: 1; flex-shrink: 0;
}
.per-cu-mgr-chip-del:hover { background: rgba(220,38,38,.1); color: var(--red); }
.per-cu-mgr-add-row { display: flex; gap: 6px; }
.per-cu-mgr-input {
flex: 1; font-size: 11px; font-family: monospace; padding: 5px 8px;
border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg, var(--surface-2));
color: var(--text-primary); outline: none;
}
.per-cu-mgr-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,70,241,.15); }
.per-cu-mgr-add-btn {
font-size: 11px; font-weight: 600; padding: 5px 10px;
background: var(--primary); color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.per-cu-mgr-add-btn:hover { opacity: .85; }
/* =============================================
Settings View
============================================= */
.settings-container {
flex: 1; overflow-y: auto; padding: 24px;
display: flex; flex-direction: column; gap: 16px; max-width: 760px;
}
.settings-container::-webkit-scrollbar { width: 4px; }
.settings-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.settings-section {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xl); padding: 24px;
box-shadow: var(--shadow-sm);
}
.settings-section-header {
display: flex; align-items: flex-start; gap: 14px;
margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.settings-section-header > .settings-section-icon {
width: 36px; height: 36px; border-radius: var(--radius-m);
background: var(--primary-soft); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--primary);
}
body.dark .settings-section-header > .settings-section-icon { background: rgba(124,70,241,0.2); }
.settings-section-icon svg { width: 18px; height: 18px; }
.settings-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.settings-section-desc { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.settings-form { display: flex; flex-direction: column; }
.settings-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.form-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }
.settings-help-link {
color: var(--primary); text-decoration: none; font-size: 11px; font-weight: 600;
margin-left: 8px; display: inline-flex; align-items: center; gap: 2px; opacity: 0.85;
}
.settings-help-link:hover { opacity: 1; text-decoration: underline; }
.settings-help-link svg { width: 11px; height: 11px; }
.cu-status-indicator { display: flex; align-items: center; gap: 7px; padding: 9px 0; }
.cu-status-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--text-tertiary); opacity: 0.5; flex-shrink: 0;
transition: background var(--t), box-shadow var(--t), opacity var(--t);
}
.cu-status-dot--connected {
background: var(--green); opacity: 1;
box-shadow: 0 0 0 3px rgba(22,163,74,0.2);
}
.cu-status-text { font-size: 12.5px; color: var(--text-secondary); }
.cu-test-result {
margin-top: 10px; padding: 9px 14px; border-radius: var(--radius-m); font-size: 12.5px;
display: flex; align-items: center; gap: 7px;
}
.cu-test-result__content {
display: inline-flex;
align-items: center;
gap: 9px;
line-height: 1.5;
}
.cu-test-result__content > span:last-child {
flex: 1;
}
.cu-test-result svg { width: 14px; height: 14px; flex-shrink: 0; }
.cu-test-result--success { background: rgba(22,163,74,0.1); color: var(--green); border: 1px solid rgba(22,163,74,0.2); }
.cu-test-result--error { background: rgba(220,38,38,0.08); color: var(--red); border: 1px solid rgba(220,38,38,0.2); }
.cu-test-result--warning { background: rgba(217,119,6,0.1); color: var(--amber); border: 1px solid rgba(217,119,6,0.2); }
.cu-test-result--loading { background: var(--surface-2); color: var(--text-secondary); }
.cu-sync-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; width: 100%; }
.cu-progress-bar { flex: 1; height: 5px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.cu-progress-fill { height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width 250ms var(--ease); width: 0%; }
.cu-progress-text { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.cu-sync-timestamp { font-size: 12.5px; color: var(--text-tertiary); padding: 9px 0; }
/* =============================================
Auto-Link Match Results
============================================= */
.match-summary { display: flex; gap: 10px; font-size: 12.5px; margin: 10px 0 6px; flex-wrap: wrap; align-items: center; }
.match-summary-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: var(--radius-pill);
font-size: 11px; font-weight: 700;
}
.match-summary-chip svg { width: 11px; height: 11px; }
.match-summary-chip--green { background: rgba(22,163,74,0.12); color: var(--green); }
.match-summary-chip--amber { background: rgba(217,119,6,0.12); color: var(--amber); }
.match-summary-chip--red { background: rgba(220,38,38,0.08); color: var(--red); }
.match-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-m); margin-top: 8px; max-height: 340px; overflow-y: auto; }
.match-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.match-table th {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-tertiary); padding: 7px 10px;
border-bottom: 1px solid var(--border); text-align: left;
background: var(--surface-2); position: sticky; top: 0; z-index: 2;
}
.match-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.match-table tr:last-child td { border-bottom: none; }
.match-table tr:hover td { background: var(--surface-2); }
.match-table .col-source { font-size: 10px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap; }
.match-table .col-task { font-size: 12px; color: var(--text-secondary); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-score {
display: inline-block; font-size: 10px; font-weight: 800;
padding: 2px 7px; border-radius: var(--radius-xs); white-space: nowrap;
}
.match-score--high { background: rgba(22,163,74,0.12); color: var(--green); }
.match-score--med { background: rgba(217,119,6,0.12); color: var(--amber); }
.match-score--low { background: rgba(220,38,38,0.08); color: var(--red); }
.match-toggle {
position: relative; width: 34px; height: 18px; border-radius: 9px;
cursor: pointer; border: none; flex-shrink: 0;
transition: background var(--t-fast);
}
.match-toggle::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%; background: #fff;
transition: transform var(--t-fast);
}
.match-toggle--on { background: var(--green); }
.match-toggle--on::after { transform: translateX(16px); }
.match-toggle--off { background: var(--border-strong); }
.match-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.no-matches-msg { text-align: center; padding: 20px; color: var(--text-tertiary); font-size: 13px; }
/* =============================================
Text Popover (Working Remarks / Escalation Context)
============================================= */
.text-popover {
position: fixed;
z-index: 9999;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg);
width: 320px;
max-height: 200px;
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
transition: opacity 120ms var(--ease), transform 120ms var(--ease);
opacity: 0;
transform: translateY(4px);
}
.text-popover:not(.hidden) { opacity: 1; transform: translateY(0); }
.text-popover-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--primary);
padding: 8px 12px 5px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
background: var(--primary-soft);
}
body.dark .text-popover-label { background: rgba(124,70,241,0.12); }
.text-popover-body {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.65;
padding: 9px 12px 10px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Remarks thread view inside popover */
.text-popover-thread {
overflow-y: auto;
padding: 6px 14px 10px;
display: flex;
flex-direction: column;
gap: 0;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.text-popover-thread .remark-entry {
padding: 8px 0;
animation: none; /* skip animation inside popover */
}
.text-popover-thread .remark-entry-text {
font-size: 12.5px;
}
.text-popover-thread .remark-entry-date {
font-size: 10px;
}
.text-popover-body::-webkit-scrollbar { width: 4px; }
.text-popover-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.th-sort-arrow {
font-size: 11px;
opacity: 0.8;
margin-left: 3px;
font-weight: 700;
}
/* ── Column pin glyph (inline freeze-in-place UX) ─────────── */
/* th-inner is a flex wrapper INSIDE | — | keeps display:table-cell */
.th-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
width: 100%;
}
.th-label-zone {
display: inline-flex;
align-items: center;
gap: 2px;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.col-pin-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--radius-s);
flex-shrink: 0;
opacity: 0;
cursor: pointer;
color: var(--text-tertiary);
transition:
opacity 150ms ease,
color 150ms ease,
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
background 150ms ease;
}
/* Show on header hover */
th:hover .col-pin-glyph { opacity: 1; }
/* Hover intent on pin itself */
.col-pin-glyph:hover {
color: var(--primary);
background: var(--primary-soft);
transform: scale(1.12);
}
/* Frozen / active state — always visible, tilted like pinned-in */
.col-pin-glyph--active {
opacity: 1;
color: var(--primary);
transform: rotate(-45deg);
}
.col-pin-glyph--active:hover {
color: var(--red);
background: var(--red-soft);
transform: rotate(-45deg) scale(1.1);
}
/* ═══════════════════════════════════════════
Dark mode — Escalation page overrides
═══════════════════════════════════════════ */
/* Strip white mixing from card/shell backgrounds — keeps surfaces dark */
body.dark .esc-card {
background: var(--surface);
}
body.dark .esc-hero-motion-shell {
background: var(--surface-2);
}
body.dark .esc-playbook-summary {
background: linear-gradient(180deg,
color-mix(in srgb, var(--primary-soft) 30%, var(--surface) 70%),
var(--surface));
}
body.dark .esc-snapshot-intro {
background: linear-gradient(180deg,
color-mix(in srgb, var(--primary-soft) 22%, var(--surface) 78%),
var(--surface));
}
/* Boost label text: tertiary is unreadable on mixed-white dark surfaces */
body.dark .esc-kpi-label,
body.dark .esc-snapshot-label { color: var(--text-secondary); }
/* Runway chip count badge — white 88% mix is jarring on dark bg */
body.dark .esc-runway-chip__count {
background: color-mix(in srgb, currentColor 22%, transparent);
}
/* Swimlane count badge — slight reduction of white opacity */
body.dark .esc-swimlane-count {
background: rgba(255,255,255,.1);
}
/* =============================================
Analytics Dashboard
============================================= */
.analytics-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 20px 24px 32px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* GridStack container — must not be clipped; height set by JS */
#analyticsGrid {
min-height: 200px;
overflow: visible !important; /* allow GridStack to set height via inline style */
}
.analytics-container::-webkit-scrollbar { width: 5px; }
.analytics-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.an-loading {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
color: var(--text-tertiary);
font-size: 14px;
}
.an-loading--motion {
flex-direction: column;
gap: 12px;
min-height: 240px;
text-align: center;
border: 1px dashed var(--border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, white 6%), color-mix(in srgb, var(--surface-2) 86%, white 14%));
}
.an-loading--motion span {
max-width: 320px;
line-height: 1.55;
}
.an-loading--empty {
color: var(--text-secondary);
}
/* KPI row */
.an-kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.an-kpi-card {
background: var(--surface);
border: 1px solid var(--border);
border-top: 3px solid var(--kpi-color, var(--primary));
border-radius: var(--radius-xl);
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow: var(--shadow-sm);
cursor: default;
transition: box-shadow var(--t-fast);
}
.an-kpi-card:hover { box-shadow: var(--shadow); }
.an-kpi-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); }
.an-kpi-value { font-size: 30px; font-weight: 300; color: var(--kpi-color, var(--primary)); line-height: 1; }
.an-kpi-sub { font-size: 11px; color: var(--text-tertiary); }
.an-kpi--violet { --kpi-color: var(--primary); }
.an-kpi--green { --kpi-color: var(--green); }
.an-kpi--amber { --kpi-color: var(--amber); }
.an-kpi--red { --kpi-color: var(--red); }
.an-kpi--accent { --kpi-color: var(--accent); }
.an-kpi--teal { --kpi-color: var(--teal); }
/* Chart card */
.an-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: var(--shadow-sm);
}
.an-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.an-card-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.an-card-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.an-chart-wrap { position: relative; }
/* Grid rows */
.an-row-2 { display: grid; gap: 16px; }
.an-row-2--5050 { grid-template-columns: 1fr 1fr; }
.an-row-2--6040 { grid-template-columns: 3fr 2fr; }
.an-row-2--4060 { grid-template-columns: 2fr 3fr; }
/* Analytics tables */
.an-table-wrap { overflow-x: auto; max-height: 360px; overflow-y: auto; border-radius: var(--radius-m); border: 1px solid var(--border); }
.an-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.an-table thead {
position: sticky;
top: 0;
z-index: 5;
background: var(--surface-2); /* on thead itself, not just th — prevents bleed-through */
}
.an-table th {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
color: var(--text-tertiary); padding: 8px 12px;
/* box-shadow instead of border-bottom — border-collapse:collapse eats border-bottom on sticky */
box-shadow: 0 1px 0 var(--border);
text-align: left;
background: var(--surface-2);
}
.an-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.an-table tr:last-child td { border-bottom: none; }
.an-table tbody tr:hover td { background: var(--surface-2); }
/* Badges in analytics */
.an-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; }
.an-badge--yes { background: rgba(220,38,38,.1); color: var(--red); }
.an-badge--no { background: rgba(22,163,74,.1); color: var(--green); }
/* Delay tracker filter buttons */
.an-tl-fb {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px; border: 1px solid var(--border);
border-radius: var(--radius-pill); background: var(--surface);
font-size: 12px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; font-family: inherit;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
white-space: nowrap;
}
.an-tl-fb:hover { background: var(--surface-2); color: var(--text-primary); }
.an-tl-fb.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.an-badge--0-5 { background: rgba(22,163,74,.12); color: var(--green); }
.an-badge--5-10 { background: rgba(217,119,6,.12); color: var(--amber); }
.an-badge--10-15 { background: rgba(217,119,6,.2); color: var(--amber); }
.an-badge--15plus { background: rgba(220,38,38,.1); color: var(--red); }
/* Section label */
.an-section-label {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-tertiary); margin-bottom: -6px;
}
/* Due-soon highlight */
.an-due-soon { color: var(--amber); font-weight: 600; }
.an-overdue { color: var(--red); font-weight: 600; }
/* ── Breadcrumb (analytics drill-down) ── */
.an-breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:4px 0 8px; border-bottom:1px solid var(--border); margin-bottom:4px; font-size:12px; }
.an-breadcrumb.hidden { display:none !important; }
.an-bc-all { color:var(--text-secondary); cursor:pointer; transition:color var(--t-fast); }
.an-bc-all:hover { color:var(--primary); }
.an-bc-sep { color:var(--text-tertiary); }
.an-bc-seg { color:var(--primary); cursor:pointer; font-weight:600; padding:2px 9px; border-radius:var(--radius-pill); background:var(--primary-soft); transition:background var(--t-fast); }
.an-bc-seg:hover { background:rgba(124,70,241,.25); }
/* ── Drill detail panel ── */
.an-drill-panel { border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }
.an-drill-panel.hidden { display:none !important; }
.an-drill-count { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); margin-bottom:8px; }
.an-drill-open { color:var(--primary) !important; cursor:pointer !important; }
.an-drill-open:hover { text-decoration:underline; }
/* ── Delivery stat pills ── */
.an-delivery-stats { display:flex; gap:12px; margin-bottom:4px; }
.an-delivery-pill { display:flex; flex-direction:column; align-items:center; background:var(--surface-2); border-radius:var(--radius-m); padding:10px 16px; gap:3px; flex:1; }
.an-delivery-pill-val { font-size:24px; font-weight:300; line-height:1; }
.an-delivery-pill-lbl { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-tertiary); }
.an-delivery-pill--green .an-delivery-pill-val { color:var(--green); }
.an-delivery-pill--red .an-delivery-pill-val { color:var(--red); }
.an-delivery-pill--violet .an-delivery-pill-val { color:var(--primary); }
/* =============================================
Timeline View — Gantt
============================================= */
.tl-wrap {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--bg);
}
/* Stats row reuses .stats-row */
.tl-stats { flex-shrink: 0; }
/* ── Timeline KPI Cards ───────────────────────────────────── */
.tl-kpi-row {
display:flex;
gap:14px;
padding:20px 24px 12px;
flex-shrink:0;
position: relative;
overflow: visible;
isolation: isolate;
}
.hcr-summary-stack {
display: flex;
flex-direction: column;
}
.summary-collapse-row,
.hcr-summary-compact {
transform-origin: top center;
will-change: opacity, transform;
transition:
opacity .42s cubic-bezier(0.22, 1, 0.36, 1),
transform .56s cubic-bezier(0.22, 1, 0.36, 1),
max-height .56s cubic-bezier(0.22, 1, 0.36, 1),
padding .56s cubic-bezier(0.22, 1, 0.36, 1),
margin .56s cubic-bezier(0.22, 1, 0.36, 1),
filter .36s ease;
}
.summary-collapse-row {
max-height: 280px;
}
.hcr-summary-stack.is-collapsed .summary-collapse-row {
opacity: 0;
transform: translateY(-12px) scale(0.985);
filter: saturate(0.94);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
pointer-events: none;
}
.hcr-summary-compact {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
max-height: 0;
opacity: 0;
transform: translateY(-10px) scale(0.985);
overflow: hidden;
pointer-events: none;
margin: 0;
padding: 0 24px;
}
.hcr-summary-stack.is-collapsed .hcr-summary-compact {
max-height: 92px;
opacity: 1;
transform: translateY(0) scale(1);
padding: 10px 24px 14px;
pointer-events: auto;
}
.summary-controls-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 0 24px 10px;
}
.summary-controls-row__spacer {
flex: 1;
}
.hcr-summary-compact__main {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.hcr-summary-compact__main > * ,
.hcr-summary-compact__show {
opacity: 0;
transform: translateY(8px);
transition:
opacity .36s cubic-bezier(0.22, 1, 0.36, 1),
transform .48s cubic-bezier(0.22, 1, 0.36, 1);
}
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > *,
.hcr-summary-stack.is-collapsed .hcr-summary-compact__show {
opacity: 1;
transform: translateY(0);
}
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(1) { transition-delay: .06s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(2) { transition-delay: .11s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(3) { transition-delay: .16s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(4) { transition-delay: .21s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(5) { transition-delay: .26s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(6) { transition-delay: .31s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__main > :nth-child(7) { transition-delay: .36s; }
.hcr-summary-stack.is-collapsed .hcr-summary-compact__show { transition-delay: .24s; }
.hcr-summary-compact__lead {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.hcr-summary-compact__metric,
.hcr-summary-compact__filter {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 7px 12px;
border-radius: 14px;
border: 1px solid var(--border);
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
white-space: nowrap;
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.hcr-summary-compact__metric {
color: var(--text-primary);
background: linear-gradient(
155deg,
color-mix(in srgb, var(--surface) 88%, white 12%),
color-mix(in srgb, var(--surface-2) 74%, white 26%)
);
}
.hcr-summary-compact__metric::after {
display: none;
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
background: var(--compact-kpi-accent, var(--border-strong));
opacity: 0;
}
.hcr-summary-compact__metric--violet {
--compact-kpi-accent: var(--primary);
background: linear-gradient(155deg, var(--surface) 38%, var(--primary-soft) 100%);
border-color: rgba(124,70,241,0.18);
color: var(--primary);
}
.hcr-summary-compact__metric--amber {
--compact-kpi-accent: var(--amber);
background: linear-gradient(155deg, var(--surface) 38%, var(--amber-soft) 100%);
border-color: rgba(217,119,6,0.18);
color: var(--amber);
}
.hcr-summary-compact__metric--red {
--compact-kpi-accent: var(--red);
background: linear-gradient(155deg, var(--surface) 38%, var(--red-soft) 100%);
border-color: rgba(220,38,38,0.18);
color: var(--red);
}
.hcr-summary-compact__metric--green {
--compact-kpi-accent: var(--green);
background: linear-gradient(155deg, var(--surface) 38%, var(--green-soft) 100%);
border-color: rgba(22,163,74,0.18);
color: var(--green);
}
.hcr-summary-compact__metric--teal {
--compact-kpi-accent: var(--teal);
background: linear-gradient(155deg, var(--surface) 38%, var(--teal-soft) 100%);
border-color: rgba(8,145,178,0.18);
color: var(--teal);
}
.hcr-summary-compact__metric--accent {
--compact-kpi-accent: var(--accent);
background: linear-gradient(155deg, var(--surface) 38%, var(--accent-soft) 100%);
border-color: rgba(16,119,218,0.18);
color: var(--accent);
}
.hcr-summary-compact__metric[data-filter-chip],
.hcr-summary-compact__metric[data-per-chip] {
cursor: pointer;
user-select: none;
transition:
transform .22s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow .22s ease,
border-color .22s ease,
filter .22s ease;
}
.hcr-summary-compact__metric[data-filter-chip]:hover,
.hcr-summary-compact__metric[data-per-chip]:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15,23,42,0.10);
filter: saturate(1.04);
}
.hcr-summary-compact__metric--active {
border-color: var(--primary) !important;
box-shadow:
0 0 0 1px rgba(124,70,241,0.16),
0 10px 22px rgba(124,70,241,0.14) !important;
transform: translateY(-1px);
}
.hcr-summary-compact__filter {
background: rgba(124,70,241,.08);
border-color: rgba(124,70,241,.18);
color: var(--primary);
}
.hcr-summary-compact__show {
flex-shrink: 0;
margin-left: auto;
font-size: 12px;
font-weight: 700;
color: var(--primary);
}
body.dark .hcr-summary-compact__lead {
color: color-mix(in srgb, var(--text-tertiary) 78%, white 22%);
}
body.dark .hcr-summary-compact__metric,
body.dark .hcr-summary-compact__filter {
box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
body.dark .hcr-summary-compact__show {
color: color-mix(in srgb, var(--primary) 84%, white 16%);
}
.tl-kpi-card {
flex: 1;
border-radius: var(--radius-xl);
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 5px;
position: relative;
overflow: hidden;
z-index: 0;
box-shadow: var(--shadow-sm);
text-align: left;
/* Spring easing on lift; smoother ease on shadow/border */
transition:
transform 0.38s cubic-bezier(0.34, 1.38, 0.64, 1),
box-shadow 0.38s ease,
border-color 0.22s ease,
border-opacity 0.22s ease;
will-change: transform;
}
/* Top-edge glass sheen */
.tl-kpi-card::before {
content: '';
position: absolute;
inset: 1px 1px auto 1px;
height: 42%;
border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 16px 16px;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 100%);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.38s ease;
}
/* Bottom accent strip */
.tl-kpi-card::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
opacity: 0.78;
transition: filter 0.38s ease, height 0.38s cubic-bezier(0.34, 1.38, 0.64, 1), opacity 0.28s ease;
}
/* Hover — spring lift, layered shadow depth, sheen intensifies */
.tl-kpi-card:hover {
transform: translateY(-4px) scale(1.006);
z-index: 2;
}
.tl-kpi-card:hover::before {
opacity: 0.82;
}
.tl-kpi-card:hover::after {
filter: brightness(1.12);
height: 3px;
opacity: 0.92;
}
/* Dark mode — kill white glass sheen; it reads as harsh light bleed on dark cards */
body.dark .tl-kpi-card::before,
body.dark .tl-kpi-card:hover::before { opacity: 0; }
/* Icon wrap micro-scale on card hover */
.tl-kpi-card:hover .tl-kpi-icon-wrap {
transform: scale(1.1);
transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tl-kpi-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tl-kpi-icon-wrap {
display:flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:var(--radius-m); flex-shrink:0;
transition: transform 0.22s ease;
}
.tl-kpi-icon-wrap svg { width:15px; height:15px; }
.tl-kpi-label { font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; }
.tl-kpi-value { font-size:36px; font-weight:800; line-height:1; letter-spacing:-0.8px; }
.tl-kpi-value--sm { font-size:22px; letter-spacing:-0.4px; }
/* Rollback: remove @keyframes kpi-digit-pop + .kpi-digit rules to revert KPI number pop-in.
Per-digit blur-slide (transitions.dev 02-number-pop-in); house bouncy easing; reduced-motion neutralized globally. */
@keyframes kpi-digit-pop {
0% { transform: translateY(8px); opacity: 0; filter: blur(2px); }
100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}
.tl-kpi-value .kpi-digit { display: inline-block; will-change: transform, opacity, filter; }
.tl-kpi-value.is-pop .kpi-digit { animation: kpi-digit-pop 500ms cubic-bezier(0.34, 1.45, 0.64, 1) both; } /* skill 02-number-pop-in: --digit-dur 500ms, --digit-ease */
.tl-kpi-value.is-pop .kpi-digit[data-stagger="1"] { animation-delay: 70ms; }
.tl-kpi-value.is-pop .kpi-digit[data-stagger="2"] { animation-delay: 140ms; }
.tl-kpi-sub { font-size:11.5px; font-weight:500; line-height:1.4; margin-top:2px; color:var(--text-secondary); }
/* Violet */
.tl-kpi--violet { background:linear-gradient(155deg,var(--surface) 40%,var(--primary-soft) 100%); border:1.5px solid rgba(124,70,241,0.18); }
.tl-kpi--violet::after { background:var(--primary); }
.tl-kpi--violet:hover {
box-shadow:
0 2px 4px rgba(124,70,241,0.10), /* ambient */
0 8px 20px rgba(124,70,241,0.22), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--violet .tl-kpi-icon-wrap { background:var(--primary-soft); color:var(--primary); }
.tl-kpi--violet .tl-kpi-label { color:var(--primary); }
.tl-kpi--violet .tl-kpi-value { color:var(--primary); }
/* Amber */
.tl-kpi--amber { background:linear-gradient(155deg,var(--surface) 40%,var(--amber-soft) 100%); border:1.5px solid rgba(217,119,6,0.18); }
.tl-kpi--amber::after { background:var(--amber); }
.tl-kpi--amber:hover {
box-shadow:
0 2px 4px rgba(217,119,6,0.08), /* ambient */
0 8px 20px rgba(217,119,6,0.22), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--amber .tl-kpi-icon-wrap { background:var(--amber-soft); color:var(--amber); }
.tl-kpi--amber .tl-kpi-label { color:var(--amber); }
.tl-kpi--amber .tl-kpi-value { color:var(--amber); }
/* Red */
.tl-kpi--red { background:linear-gradient(155deg,var(--surface) 40%,var(--red-soft) 100%); border:1.5px solid rgba(220,38,38,0.18); }
.tl-kpi--red::after { background:var(--red); }
.tl-kpi--red:hover {
box-shadow:
0 2px 4px rgba(220,38,38,0.08), /* ambient */
0 8px 20px rgba(220,38,38,0.22), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--red .tl-kpi-icon-wrap { background:var(--red-soft); color:var(--red); }
.tl-kpi--red .tl-kpi-label { color:var(--red); }
.tl-kpi--red .tl-kpi-value { color:var(--red); }
/* Green */
.tl-kpi--green { background:linear-gradient(155deg,var(--surface) 40%,var(--green-soft) 100%); border:1.5px solid rgba(22,163,74,0.18); }
.tl-kpi--green::after { background:var(--green); }
.tl-kpi--green:hover {
box-shadow:
0 2px 4px rgba(22,163,74,0.08), /* ambient */
0 8px 20px rgba(22,163,74,0.22), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--green .tl-kpi-icon-wrap { background:var(--green-soft); color:var(--green); }
.tl-kpi--green .tl-kpi-label { color:var(--green); }
.tl-kpi--green .tl-kpi-value { color:var(--green); }
/* Accent */
.tl-kpi--accent { background:linear-gradient(155deg,var(--surface) 40%,var(--accent-soft) 100%); border:1.5px solid rgba(16,119,218,0.18); }
.tl-kpi--accent::after { background:var(--accent); }
.tl-kpi--accent:hover {
box-shadow:
0 2px 4px rgba(16,119,218,0.08), /* ambient */
0 8px 20px rgba(16,119,218,0.22), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--accent .tl-kpi-icon-wrap { background:var(--accent-soft); color:var(--accent); }
.tl-kpi--accent .tl-kpi-label { color:var(--accent); }
.tl-kpi--accent .tl-kpi-value { color:var(--accent); }
/* Teal */
.tl-kpi--teal { background:linear-gradient(155deg,var(--surface) 40%,var(--teal-soft) 100%); border:1.5px solid rgba(8,145,178,0.18); }
.tl-kpi--teal::after { background:var(--teal); }
.tl-kpi--teal:hover {
box-shadow:
0 2px 4px rgba(8,145,178,0.08), /* ambient */
0 8px 20px rgba(8,145,178,0.24), /* colored glow */
0 20px 36px rgba(15,23,42,0.10); /* depth */
}
.tl-kpi--teal .tl-kpi-icon-wrap { background:var(--teal-soft); color:var(--teal); }
.tl-kpi--teal .tl-kpi-label { color:var(--teal); }
.tl-kpi--teal .tl-kpi-value { color:var(--teal); }
/* Active state (filter chip selected) */
.tl-kpi--active {
transform:translateY(-2px) !important;
outline:2px solid var(--primary);
outline-offset:2px;
}
/* All Requests page: cards are clickable filters */
.tl-kpi-card[data-filter-chip] { cursor:pointer; }
/* Informational tiles should stay visually calm and non-interactive */
.tl-kpi-card--static { cursor: default; }
.tl-kpi-card--static:hover {
transform: none;
z-index: 0;
}
.tl-kpi-card--static:hover::before {
opacity: 0.5;
}
.tl-kpi-card--static:hover::after {
filter: none;
height: 3px;
}
.tl-kpi-card--static:hover .tl-kpi-icon-wrap {
transform: none;
}
/* Controls bar */
.tl-controls {
display: flex;
align-items: center;
gap: 12px;
padding: 0 24px 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.tl-ctl-group { display: flex; align-items: center; gap: 6px; }
.tl-ctl-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-tertiary); white-space: nowrap; }
.tl-ctl-btn {
padding: 5px 12px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface);
font-size: 12.5px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
font-family: inherit;
white-space: nowrap;
}
.tl-ctl-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.tl-ctl-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 700; }
.tl-dated-toggle {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
cursor: pointer; user-select: none;
}
.tl-dated-toggle input { accent-color: var(--primary); cursor: pointer; }
.tl-undated-badge {
font-size: 11px; font-weight: 600; color: var(--text-tertiary);
background: var(--surface-2); padding: 3px 10px;
border-radius: var(--radius-pill); border: 1px solid var(--border);
}
.tl-group-strip {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 24px 12px;
border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border) 86%);
border-radius: var(--radius-l);
background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white 4%), color-mix(in srgb, var(--surface-2) 88%, white 12%));
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.tl-group-strip__toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
background: none;
border: none;
color: inherit;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background var(--t-fast), color var(--t-fast);
}
.tl-group-strip__toggle:hover {
background: color-mix(in srgb, var(--surface-2) 72%, white 28%);
}
.tl-group-strip__toggle-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.tl-group-strip__toggle-meta {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.tl-group-strip__eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.tl-group-strip__summary {
font-size: 14px;
font-weight: 800;
color: var(--text-primary);
line-height: 1.25;
}
.tl-group-strip__caption {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
max-width: 560px;
}
.tl-group-strip__metric {
display: inline-flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
padding: 5px 10px;
border-radius: var(--radius-m);
background: color-mix(in srgb, var(--surface) 74%, white 26%);
border: 1px solid color-mix(in srgb, var(--border) 74%, var(--primary) 26%);
min-width: 86px;
}
.tl-group-strip__metric-value {
font-size: 12px;
font-weight: 800;
color: var(--text-primary);
line-height: 1.1;
}
.tl-group-strip__metric-label {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: .08em;
}
.tl-group-strip__chevron {
font-size: 16px;
color: var(--text-tertiary);
line-height: 1;
transition: transform var(--t-fast), color var(--t-fast);
}
.tl-group-strip.is-open .tl-group-strip__chevron {
transform: rotate(180deg);
color: var(--primary);
}
.tl-group-strip__toggle:hover .tl-group-strip__chevron {
color: var(--text-primary);
}
.tl-group-strip__body {
display: grid;
grid-template-rows: 0fr;
border-top: 1px solid transparent;
transition: grid-template-rows var(--t) var(--ease), opacity var(--t) var(--ease), border-color var(--t-fast) var(--ease);
opacity: 0;
}
.tl-group-strip.is-open .tl-group-strip__body {
grid-template-rows: 1fr;
opacity: 1;
border-top-color: var(--border);
}
.tl-group-strip__body > .tl-group-strip__chips {
min-height: 0;
overflow: hidden;
}
.tl-group-strip__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 16px 16px;
}
.tl-group-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--group-color, var(--primary)) 20%, var(--border) 80%);
background: color-mix(in srgb, var(--group-color, var(--primary)) 7%, var(--surface) 93%);
color: var(--text-primary);
cursor: pointer;
transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
font-family: inherit;
}
.tl-group-chip:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--group-color, var(--primary)) 44%, var(--border) 56%);
box-shadow: var(--shadow-sm);
}
.tl-group-chip--active {
border-color: var(--group-color, var(--primary));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--group-color, var(--primary)) 18%, transparent);
}
.tl-group-chip__swatch {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--group-color, var(--primary));
flex-shrink: 0;
}
.tl-group-chip__label {
font-size: 12px;
font-weight: 700;
}
.tl-group-chip__meta {
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Gantt canvas wrapper */
.tl-gantt-wrap {
flex: 1;
min-height: 0;
overflow: hidden !important;
margin: 0 24px 10px;
border-radius: var(--radius-l);
border: 1px solid var(--border);
background: var(--surface);
position: relative;
}
/* Keep the Gantt container as the only scroll parent so sticky headers lock correctly. */
.tl-gantt-wrap .gantt-container {
height: 100% !important;
overflow: auto !important;
}
.tl-group-overlay {
position: absolute;
inset: 0 auto auto 0;
pointer-events: none;
z-index: 2;
}
.tl-group-band {
position: absolute;
left: 0;
}
.tl-group-band::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--primary)) 6%, transparent), transparent 18%);
opacity: .95;
}
.tl-group-band::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: color-mix(in srgb, var(--group-color, var(--primary)) 28%, var(--border) 72%);
}
.tl-group-band--first::after {
display: none;
}
.tl-group-band--active::before {
background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, var(--primary)) 12%, transparent), transparent 22%);
}
.tl-legend {
flex-shrink: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 14px;
margin: 0 24px 14px;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-l);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.tl-legend-item {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.tl-legend-bar {
width: 20px;
height: 5px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
.tl-empty-msg {
padding: 48px 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
font-size: 13.5px;
color: var(--text-tertiary);
font-style: italic;
line-height: 1.55;
}
.tl-empty-motion {
width: 74px;
height: 74px;
}
/* ── Frappe Gantt overrides ───────────────────────── */
.gantt-container {
font-family: 'Plus Jakarta Sans', sans-serif !important;
background: var(--surface) !important;
}
.gantt-container .grid-header {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background: var(--surface-2) !important;
}
.gantt-container .upper-header,
.gantt-container .lower-header {
background: var(--surface-2) !important;
border-bottom: 1px solid var(--border) !important;
}
.gantt-container .side-header {
background: var(--surface-2) !important;
border-left: 1px solid var(--border) !important;
}
.gantt-container .upper-text,
.gantt-container .lower-text,
.gantt-container .lower-header .date,
.gantt-container .upper-header .date {
font-family: 'Plus Jakarta Sans', sans-serif !important;
box-shadow: none !important;
}
.gantt-container .upper-text {
color: var(--text-tertiary) !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
background: transparent !important;
}
.gantt-container .lower-text {
color: var(--text-secondary) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
background: transparent !important;
}
.gantt-container .upper-text.current-upper {
background: transparent !important;
color: var(--primary) !important;
border: none !important;
border-radius: 0 !important;
}
.gantt-container .lower-text.current-date-highlight {
background: var(--primary-soft) !important;
color: var(--primary) !important;
border: 1px solid rgba(124,70,241,.25) !important;
border-radius: var(--radius-pill) !important;
}
.gantt-container .lower-header .date { color: var(--text-secondary) !important; font-weight: 600 !important; font-size: 11px !important; }
.gantt-container .upper-header .date { color: var(--text-tertiary) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
.gantt .grid-row { fill: var(--surface) !important; }
.gantt .grid-row:nth-child(even) { fill: var(--bg) !important; }
.gantt .row-line { stroke: var(--border) !important; }
.gantt .tick { stroke: var(--border) !important; }
.gantt .tick.thick { stroke: var(--border-strong) !important; }
.gantt .today-highlight { fill: rgba(217,119,6,0.08) !important; }
.gantt .bar-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; fill: #fff !important; }
.gantt .bar-label.big { fill: var(--text-secondary) !important; }
.gantt .bar-progress { opacity: 0.75 !important; }
.gantt .bar-wrapper { cursor: pointer !important; }
.gantt .bar-wrapper:hover .bar { filter: brightness(1.1) !important; }
.gantt-container .today-button {
background: var(--primary) !important;
color: #fff !important;
border: none !important;
border-radius: var(--radius-m) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 5px 12px !important;
cursor: pointer !important;
}
.gantt-container .popup-wrapper {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-l) !important;
box-shadow: var(--shadow-lg) !important;
padding: 14px 16px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
max-width: 300px !important;
min-width: 240px !important;
}
.gantt-container .popup-wrapper .title,
.gantt-container .popup-wrapper .subtitle,
.gantt-container .popup-wrapper .details { display: none !important; }
body.dark .gantt .grid-row { fill: var(--surface) !important; }
body.dark .gantt .grid-row:nth-child(even) { fill: var(--bg) !important; }
body.dark .gantt-container .upper-header,
body.dark .gantt-container .lower-header { background: var(--surface-2) !important; border-bottom-color: var(--border) !important; }
body.dark .gantt .bar-label.big { fill: var(--text-secondary) !important; }
body.dark .gantt-container .popup-wrapper { background: var(--surface) !important; }
.cu-md-link { color: var(--primary); font-weight: 500; }
.cu-md-link svg { opacity: 0.7; }
/* =============================================
Clerk Auth Gate
============================================= */
.clerk-gate {
position: fixed;
inset: 0;
background: var(--bg);
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
padding: 24px;
transition: opacity var(--t-slow) ease;
}
.clerk-gate.hidden { display: none !important; }
.clerk-gate-brand {
display: flex;
align-items: center;
gap: 14px;
}
.clerk-gate-icon {
width: 48px;
height: 48px;
background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
border-radius: var(--radius-l);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px solid rgba(255,255,255,0.22);
box-shadow: 0 6px 16px rgba(106,58,244,0.22), inset 0 1px 0 rgba(255,255,255,0.18);
flex-shrink: 0;
}
.clerk-gate-icon svg { width: 31px; height: 31px; }
/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .clerk-gate-icon {
background: #fff;
color: #7C46F1;
border: 1px solid rgba(124,70,241,0.20);
box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(124,70,241,0.08);
}
.clerk-gate-title { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: .03em; text-transform: uppercase; }
.clerk-gate-sub { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; }
#clerkSignInMount { width: 100%; max-width: 420px; }
.clerk-gate-msg {
font-size: 13px;
color: var(--text-secondary);
text-align: center;
max-width: 400px;
line-height: 1.6;
padding: 14px 18px;
background: var(--surface-2);
border-radius: var(--radius-m);
border: 1px solid var(--border);
}
.clerk-gate-msg a { color: var(--primary); font-weight: 600; }
.clerk-gate-msg.hidden { display: none !important; }
/* ── Clerk gate loading animation ───────────────────────────── */
.clerk-loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
animation: cg-fade-up 0.5s cubic-bezier(0.34,1.2,0.64,1) both;
}
.clerk-loader--out {
animation: cg-fade-out 0.4s ease forwards !important;
pointer-events: none;
}
/* Orbit container */
.clerk-loader-orbit {
position: relative;
width: 88px;
height: 88px;
}
/* Central brand icon */
.clerk-loader-icon-wrap {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
background: linear-gradient(145deg, #8B5BF2 0%, #7C46F1 55%, #5B2CC9 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
animation: cg-icon-pulse 2.2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(124,70,241,0.45);
}
/* explicit size so the mark is padded & centred like the header/gate (was full-bleed) */
.clerk-loader-icon-wrap svg { width: 35px; height: 35px; }
/* Dark mode: inverse logo — white tile + Royal Blue mark (via currentColor) */
body.dark .clerk-loader-icon-wrap {
background: #fff;
color: #7C46F1;
}
/* Inner orbit ring */
.clerk-loader-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2.5px solid transparent;
border-top-color: var(--primary);
border-right-color: rgba(124,70,241,0.25);
animation: cg-spin 1.1s linear infinite;
}
/* Outer orbit ring — counter-spin, fainter */
.clerk-loader-ring--outer {
inset: -10px;
border-width: 1.5px;
border-top-color: transparent;
border-bottom-color: rgba(124,70,241,0.35);
animation: cg-spin-rev 1.9s linear infinite;
}
/* "Authenticating…" blinking label */
.clerk-loader-text {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
animation: cg-blink 1.8s ease-in-out infinite;
}
/* Progress bar */
.clerk-loader-bar {
width: 180px;
height: 3px;
background: var(--border);
border-radius: 99px;
overflow: hidden;
}
.clerk-loader-bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--primary) 0%, #a78bfa 100%);
border-radius: 99px;
animation: cg-progress 3s cubic-bezier(0.4,0,0.15,1) forwards;
}
/* Sign-in mount — hidden until loader finishes */
.clerk-mount-hidden {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
pointer-events: none;
width: 100%;
max-width: 420px;
}
.clerk-mount-hidden.clerk-mount-visible {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
/* Keyframes */
@keyframes cg-spin { to { transform: rotate(360deg); } }
@keyframes cg-spin-rev { to { transform: rotate(-360deg); } }
@keyframes cg-icon-pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(124,70,241,0.4); transform: translate(-50%,-50%) scale(1); }
50% { box-shadow: 0 0 0 12px rgba(124,70,241,0); transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes cg-blink {
0%,100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes cg-progress {
0% { width: 0%; }
55% { width: 70%; }
82% { width: 88%; }
100% { width: 100%; }
}
@keyframes cg-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes cg-fade-out {
from { opacity: 1; transform: translateY(0) scale(1); }
to { opacity: 0; transform: translateY(-8px) scale(0.97); }
}
/* User menu (sign out dropdown) */
.user-menu {
position: fixed;
bottom: 64px;
left: 12px;
width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg);
z-index: 500;
overflow: hidden;
animation: slideDown 150ms var(--ease);
}
.user-menu.hidden { display: none !important; }
.user-menu-info {
padding: 12px 14px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 2px;
}
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.user-menu-email { font-size: 11px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
font-size: 13px;
font-weight: 500;
color: var(--red);
text-align: left;
transition: background var(--t-fast);
}
.user-menu-item:hover { background: var(--surface-2); }
/* =============================================
Profile View
============================================= */
.profile-container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px 24px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
align-items: stretch;
}
.profile-container::-webkit-scrollbar { width: 5px; }
.profile-container::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.profile-left {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
min-height: 752px;
max-width: 860px;
}
.profile-section-label {
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-tertiary); padding-bottom: 4px;
}
/* Clerk component container */
.profile-clerk-card {
min-height: 720px;
border-radius: var(--radius-xl);
}
#clerkUserProfile { min-height: 720px; }
#clerkUserProfile,
#clerkUserProfile > *,
#clerkUserProfile .cl-rootBox,
#clerkUserProfile .cl-userProfile-root,
#clerkUserProfile .cl-cardBox,
#clerkUserProfile .cl-scrollBox,
#clerkUserProfile .cl-pageScrollBox,
#clerkUserProfile .cl-page,
#clerkUserProfile .cl-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#clerkUserProfile .cl-cardBox,
#clerkUserProfile .cl-card {
box-shadow: none !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius-xl) !important;
overflow: hidden !important;
}
.profile-empty {
min-height: 260px;
padding: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow-sm);
color: var(--text-secondary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
text-align: center;
}
.profile-empty strong {
color: var(--text-primary);
font-size: 15px;
}
.profile-empty span:not(.profile-empty-icon) {
max-width: 360px;
font-size: 12.5px;
line-height: 1.6;
}
.profile-empty-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-l);
background: var(--primary-soft);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
}
.profile-empty-icon svg { width: 22px; height: 22px; }
.profile-pref-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 16px 18px;
box-shadow: var(--shadow-sm);
}
.profile-pref-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.profile-pref-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.profile-pref-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.profile-theme-toggle {
display: flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: var(--radius-pill);
background: var(--surface-2); border: 1px solid var(--border);
font-size: 13px; font-weight: 600; color: var(--text-primary);
cursor: pointer; transition: background var(--t-fast);
}
.profile-theme-toggle:hover { background: var(--primary-soft); color: var(--primary); }
.profile-theme-toggle svg { width: 15px; height: 15px; }
/* ── Clerk UserProfile seamless overrides ── */
#clerkUserProfile { width: 100%; }
#clerkUserProfile .cl-rootBox,
#clerkUserProfile .cl-userProfile-root { width: 100% !important; box-shadow: none !important; }
/* Strip Clerk's outer shadow so it blends with app surface */
#clerkUserProfile .cl-card { box-shadow: none !important; }
/* Nav sidebar matches app's surface-2 */
#clerkUserProfile .cl-navbar {
background: var(--surface-2) !important;
border-right: 1px solid var(--border) !important;
}
/* Nav buttons match app nav style */
#clerkUserProfile .cl-navbarButton:hover { background: var(--primary-soft) !important; }
#clerkUserProfile .cl-navbarButton__active { background: var(--primary-soft) !important; color: var(--primary) !important; }
/* Injected sign-out nav item */
.cl-injected-sep {
height: 1px;
background: var(--border);
margin: 6px 8px;
}
.cl-injected-signout-btn {
display: flex !important;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px !important;
border-radius: var(--radius-m) !important;
color: var(--red, #E5534B) !important;
font-size: 13px;
font-weight: 500;
background: none;
border: none;
cursor: pointer;
text-align: left;
transition: background 100ms;
}
.cl-injected-signout-btn:hover { background: rgba(229,83,75,0.08) !important; }
.cl-injected-signout-btn svg { flex-shrink: 0; opacity: 0.85; }
/* Hide standalone session card — sign-out now lives inside Clerk nav */
.profile-session-card { display: none !important; }
/* Hide "Secured by Clerk" and development mode badge */
#clerkUserProfile .cl-footer,
#clerkUserProfile .cl-footerAction,
#clerkUserProfile [data-localization-key="userProfile.footer.text"] { display: none !important; }
/* Profile page layout — full height */
.view#view-my-accounts { overflow: hidden; }
.profile-container { max-height: 100%; }
/* Hide ALL Clerk branding/footer — target every possible selector */
#clerkUserProfile [class*="footer"],
#clerkUserProfile [class*="Footer"],
#clerkUserProfile [class*="powered"],
#clerkUserProfile [class*="Powered"],
#clerkUserProfile [class*="secured"],
#clerkUserProfile [class*="Secured"],
#clerkUserProfile [class*="badge"],
#clerkUserProfile [class*="Badge"],
#clerkUserProfile a[href*="clerk.com"],
#clerkUserProfile a[href*="clerk.dev"] { display: none !important; height: 0 !important; overflow: hidden !important; }
.profile-pref-card { min-width: 0; }
.profile-pref-row { flex-wrap: nowrap; gap: 8px; }
.profile-pref-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-theme-toggle { white-space: nowrap; flex-shrink: 0; }
.profile-signout-btn { flex-shrink: 0; white-space: nowrap; }
.user-menu-item--settings { color: var(--text-primary); }
.user-menu-item--settings:hover { background: var(--surface-2); color: var(--primary); }
/* ── Analytics active filter chip ── */
.an-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 8px;
}
.an-filter-chip-label {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: .06em;
flex-shrink: 0;
}
.an-filter-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 10px 5px 12px;
background: var(--primary-soft);
border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--t-fast), border-color var(--t-fast);
}
.an-filter-chip:hover {
background: color-mix(in srgb, var(--primary) 18%, transparent);
border-color: var(--primary);
}
.an-filter-chip-value {
font-size: 12.5px;
font-weight: 700;
color: var(--primary);
}
.an-filter-chip-x {
font-size: 11px;
font-weight: 700;
color: var(--primary);
opacity: 0.7;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--primary) 12%, transparent);
transition: background var(--t-fast), opacity var(--t-fast);
}
.an-filter-chip:hover .an-filter-chip-x {
opacity: 1;
background: color-mix(in srgb, var(--primary) 22%, transparent);
}
/* ── Frappe Gantt dark mode overrides ── */
body.dark .gantt-container {
background: var(--surface) !important;
color: var(--text-primary) !important;
}
body.dark .gantt-container .grid-header,
body.dark .gantt-container .upper-header,
body.dark .gantt-container .lower-header,
body.dark .gantt-container .side-header {
background: var(--surface-2) !important;
border-color: var(--border) !important;
}
body.dark .gantt svg,
body.dark .gantt-container svg {
background: var(--surface) !important;
}
body.dark .gantt .grid-row { fill: var(--surface) !important; }
body.dark .gantt .grid-row:nth-child(even) { fill: rgba(255,255,255,0.02) !important; }
body.dark .gantt .row-line { stroke: var(--border) !important; stroke-opacity: 1 !important; }
body.dark .gantt .tick { stroke: var(--border) !important; stroke-opacity: 0.6 !important; }
body.dark .gantt .tick.thick { stroke: var(--border-strong) !important; stroke-opacity: 1 !important; }
body.dark .gantt .today-highlight { fill: rgba(124,70,241,0.1) !important; }
body.dark .gantt text { fill: var(--text-secondary) !important; }
body.dark .gantt .bar-label { fill: rgba(255,255,255,0.9) !important; }
body.dark .gantt .bar-label.big { fill: var(--text-secondary) !important; }
body.dark .tl-gantt-wrap { border-color: var(--border) !important; background: var(--surface) !important; }
/* Fix white background on Frappe Gantt internal elements in dark mode */
body.dark .gantt-container .gantt { background: var(--surface) !important; }
body.dark .gantt-container rect[fill="#fff"],
body.dark .gantt-container rect[fill="white"],
body.dark .gantt-container rect[fill="#f5f5f5"] { fill: var(--surface) !important; }
body.dark .gantt-container .lower-text { color: var(--text-secondary) !important; }
body.dark .gantt-container .upper-text { color: var(--text-tertiary) !important; }
body.dark .gantt-container .popup-wrapper {
background: var(--surface-2) !important;
border-color: var(--border) !important;
color: var(--text-primary) !important;
}
/* ── Frappe Gantt: override CSS variables in dark mode ── */
body.dark .gantt-container {
--g-header-background: #18161F;
--g-row-color: #18161F;
--g-row-border-color: #2D2A3A;
--g-tick-color: rgba(255,255,255,0.06);
--g-tick-color-thick: rgba(255,255,255,0.12);
--g-text-dark: #EEEAF8;
--g-text-muted: #9993AE;
--g-text-light: #EEEAF8;
--g-border-color: #2D2A3A;
--g-bar-color: #211E2A;
--g-bar-border: #3D3850;
--g-progress-color: transparent; /* hides the white pill */
--g-actions-background: #211E2A;
--g-arrow-color: #9993AE;
--g-weekend-highlight-color: rgba(255,255,255,0.02);
--g-today-highlight: rgba(124,70,241,0.2);
--g-weekend-label-color: #2D2A3A;
--g-expected-progress: rgba(124,70,241,0.2);
--g-handle-color: #9993AE;
}
/* Hide date-range-highlight pill permanently (both modes) */
.gantt-container .date-range-highlight { display: none !important; }
/* current-upper sticky label white bg fix */
body.dark .gantt-container .current-upper { background: #18161F !important; }
.gantt-container .side-header { z-index: 2000 !important; pointer-events: all !important; }
body.dark .gantt-container .side-header,
body.dark .gantt-container .side-header * { background-color: #211E2A !important; color: #EEEAF8 !important; border-color: #2D2A3A !important; }
/* ── Timeline popup tooltip ── */
.gantt-container .popup-wrapper { padding: 0 !important; border-radius: 14px !important; min-width: 240px !important; max-width: 300px !important; overflow: hidden !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; background: var(--surface) !important; }
body.dark .gantt-container .popup-wrapper { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
.tl-tt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
.tl-tt-cust { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tl-tt-arr { font-size: 12px; font-weight: 700; color: var(--primary); font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap; }
.tl-tt-badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 6px; }
.tl-tt-module { font-size: 11px; color: var(--text-tertiary); padding: 0 14px 8px; }
.tl-tt-phases { padding: 6px 14px 6px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tl-tt-ph { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.tl-tt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tl-tt-ph > span:nth-child(2) { color: var(--text-secondary); flex: 1; }
.tl-tt-dt { color: var(--text-primary); font-weight: 600; margin-left: auto; white-space: nowrap; }
.tl-tt-owners { display: flex; gap: 12px; padding: 8px 14px; flex-wrap: wrap; }
.tl-tt-own { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.tl-tt-hint { padding: 6px 14px 10px; font-size: 10.5px; color: var(--text-tertiary); font-style: italic; text-align: center; }
/* ── Timeline legend interactive buttons ── */
.tl-legend-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); margin-right: 4px; }
.tl-legend-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 8px; border-radius: var(--radius-pill);
border: 1px solid transparent; cursor: pointer;
font-size: 12px; font-weight: 600; color: var(--text-secondary);
background: transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tl-legend-btn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); }
.tl-legend-btn--active {
background: var(--primary-soft) !important;
color: var(--primary) !important;
border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
}
.tl-legend-btn--muted { opacity: 0.38; }
.tl-legend-clear {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: var(--radius-pill);
border: 1px solid var(--red); cursor: pointer;
font-size: 11px; font-weight: 700; color: var(--red);
background: rgba(220,38,38,.06); transition: background var(--t-fast);
margin-left: 4px;
}
.tl-legend-clear:hover { background: rgba(220,38,38,.12); }
/* ── Column freeze ── */
.col-frozen { background: var(--surface) !important; }
.data-table thead th.col-frozen { background: var(--surface-2) !important; }
/* freeze-rail-active: tinted panel — visually distinct from scrolling area */
.data-table.freeze-rail-active th.col-frozen,
.data-table.freeze-rail-active .row-sel-th {
background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)) !important;
}
.data-table.freeze-rail-active td.col-frozen,
.data-table.freeze-rail-active .row-sel-cell {
background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
}
/* Last pinned column — one subtle neutral hairline (no glow, no purple, no doubled line) */
.col-frozen-last,
.data-table.freeze-rail-active tbody td.col-frozen-last,
.data-table.freeze-rail-active thead th.col-frozen-last {
box-shadow: 1px 0 0 0 var(--border) !important;
}
.data-table.freeze-rail-active thead th.col-frozen-last {
z-index: 54 !important;
isolation: isolate;
}
/* drop the old secondary header hairline that doubled the separator */
.data-table.freeze-rail-active thead th.col-frozen-last::after { content: none; }
/* Per-cell top sheen — col-frozen-last overrides this via !important on last col */
.data-table.freeze-rail-active td.col-frozen {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}
body.dark .data-table.freeze-rail-active td.col-frozen {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
/* GPU compositing hint — body frozen cells only.
DO NOT apply transform to thead cells (.row-sel-th, thead .col-frozen):
transform on a | inside position:sticky breaks vertical stickiness
by creating a stacking context that decouples the cell from the parent's sticky offset. */
.data-table tbody .col-frozen,
.row-sel-cell {
transform: translateZ(0);
}
/* Selector column z-index */
.row-sel-th { background: var(--surface-2) !important; z-index: 20 !important; }
.row-sel-cell { background: var(--surface) !important; z-index: 10 !important; }
/* Hover/selected — uses --frozen-hover-bg (light: --primary-soft, dark: color-mix) */
.table-row:hover .row-sel-cell { background: var(--frozen-hover-bg) !important; }
.table-row.row-selected .row-sel-cell { background: var(--frozen-hover-bg) !important; }
.data-table.freeze-rail-active .table-row:hover td.col-frozen,
.data-table.freeze-rail-active .table-row:hover .row-sel-cell {
background: var(--frozen-hover-bg) !important;
}
.data-table.freeze-rail-active .table-row.row-selected td.col-frozen,
.data-table.freeze-rail-active .table-row.row-selected .row-sel-cell,
.data-table.freeze-rail-active .table-row.row-selected:hover td.col-frozen,
.data-table.freeze-rail-active .table-row.row-selected:hover .row-sel-cell {
background: var(--frozen-hover-bg) !important;
}
/* ── Dark mode frozen overrides ── */
body.dark .col-frozen { background: var(--surface) !important; }
body.dark .data-table thead th.col-frozen { background: color-mix(in srgb, var(--primary) 10%, var(--surface-2)) !important; }
body.dark .col-frozen-last { box-shadow: 1px 0 0 0 var(--border) !important; }
/* frozen header: deepest primary tint — caps the panel visually */
body.dark .row-sel-th,
body.dark .data-table.freeze-rail-active th.col-frozen,
body.dark .data-table.freeze-rail-active .row-sel-th {
background: color-mix(in srgb, var(--primary) 14%, var(--surface-2)) !important;
}
/* frozen body: clearly purple-tinted vs neutral #18161F scroll cells */
body.dark .row-sel-cell,
body.dark .data-table.freeze-rail-active td.col-frozen,
body.dark .data-table.freeze-rail-active .row-sel-cell {
background: color-mix(in srgb, var(--primary) 12%, var(--surface)) !important;
}
/* hover/selected — dark uses opaque color-mix via --frozen-hover-bg (avoids semi-transparent bleed) */
body.dark .data-table.freeze-rail-active .table-row:hover td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row:hover .row-sel-cell,
body.dark .data-table.freeze-rail-active .table-row.row-selected td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row.row-selected .row-sel-cell,
body.dark .data-table.freeze-rail-active .table-row.row-selected:hover td.col-frozen,
body.dark .data-table.freeze-rail-active .table-row.row-selected:hover .row-sel-cell {
background: var(--frozen-hover-bg) !important;
}
/* Freeze dropdown removed — pin glyphs in column headers now handle freezing */
/* ── CSV Export ── */
.export-sel-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; background: var(--primary); color: #fff;
border-radius: var(--radius-pill); font-size: 10px; font-weight: 700;
padding: 0 5px; margin-left: 4px;
}
.export-btn--active { background: var(--primary-soft) !important; border-color: var(--primary) !important; color: var(--primary) !important; }
/* ── Row selector column — slim rail UX ─────────────────────────────────── */
.row-sel-th {
width: 32px !important; min-width: 32px !important; max-width: 32px !important;
padding: 0 !important; text-align: center !important; vertical-align: middle !important;
/* Divider hidden at rest — only appears when table has active selection */
box-shadow: none !important;
transition: box-shadow 150ms ease;
}
.row-sel-cell {
width: 32px !important; min-width: 32px !important; max-width: 32px !important;
padding: 0 !important; text-align: center !important; vertical-align: middle !important;
box-shadow: none !important;
transition: box-shadow 150ms ease, background 120ms ease;
}
/* Divider appears only when any row is selected — consistent low-opacity on both header and body */
.data-table.has-selection .row-sel-th { box-shadow: 2px 0 0 0 rgba(124,70,241,0.22) !important; }
.data-table.has-selection .row-sel-cell { box-shadow: 2px 0 0 0 rgba(124,70,241,0.12) !important; }
.row-checkbox {
width: 14px; height: 14px; cursor: pointer; display: block; margin: auto;
accent-color: var(--primary);
opacity: 0.22; /* dim at rest — visible enough to discover, quiet enough not to clutter */
transition: opacity 130ms ease, transform 130ms cubic-bezier(0.34,1.56,0.64,1);
}
/* Select-all header checkbox — slightly more visible */
.row-sel-th .row-checkbox { opacity: 0.3; }
/* Hover — snap to full opacity + micro scale-up */
.table-row:hover .row-checkbox,
.row-sel-th:hover .row-checkbox { opacity: 1 !important; transform: scale(1.1); }
/* Checked — always full opacity + pop */
.row-checkbox:checked { opacity: 1 !important; transform: scale(1.08); }
/* PER table checkboxes — mirrors HCR .row-checkbox pattern */
.per-row-checkbox {
width: 14px; height: 14px; display: block; margin: auto;
accent-color: var(--primary);
opacity: 0;
transition: opacity 130ms ease, transform 130ms cubic-bezier(0.34,1.56,0.64,1);
}
.per-row-sel-th .per-row-checkbox { opacity: 0.3; }
.per-table-row:hover .per-row-checkbox,
.per-row-sel-th:hover .per-row-checkbox { opacity: 1 !important; transform: scale(1.1); }
.per-row-checkbox:checked { opacity: 1 !important; transform: scale(1.08); }
/* Selected row — violet left accent border + tint */
.table-row.row-selected td {
background: color-mix(in srgb, var(--primary) 6%, var(--surface)) !important;
}
.table-row.row-selected:hover td {
background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
}
/* Left accent rail on selected row's first visible cell */
.table-row.row-selected .row-sel-cell {
box-shadow: inset 3px 0 0 var(--primary) !important;
}
/* Dark mode overrides */
body.dark .table-row.row-selected td {
background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
}
body.dark .table-row.row-selected:hover td {
background: color-mix(in srgb, var(--primary) 14%, var(--surface)) !important;
}
/* ── Toolbar overflow ⋯ menu ─────────────────────────────────────────────── */
.toolbar-overflow { position: relative; }
.toolbar-overflow-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(124,70,241,0.06);
z-index: 200;
padding: 4px 0;
animation: tov-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform-origin: top right;
}
body.dark .toolbar-overflow-menu {
box-shadow: 0 4px 6px rgba(0,0,0,0.14), 0 12px 32px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(124,70,241,0.15);
}
.tov-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 14px;
font-size: 13px; font-weight: 500; color: var(--text-primary);
background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
transition: background 100ms ease, color 100ms ease;
}
.tov-item svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); transition: color 100ms; }
.tov-item:hover { background: var(--primary-soft); color: var(--primary); }
.tov-item:hover svg { color: var(--primary); }
.tov-item--active { color: var(--primary); font-weight: 600; }
.tov-sep { height: 1px; background: var(--border); margin: 4px 0; }
@keyframes tov-in {
from { opacity: 0; transform: translateY(-6px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hide proxy buttons (still in DOM for JS compat) */
#exportCsvBtn,
#clipboardExportBtn { display: none !important; }
/* ── Contextual selection toolbar ───────────────────────────────────────── */
/* Default elements — visible at rest, hidden when rows selected */
.ctx-default {
transition: opacity 200ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1), width 220ms cubic-bezier(0.16,1,0.3,1);
opacity: 1;
transform: translateX(0) scale(1);
overflow: hidden;
max-width: 200px; /* large enough; transitions from 0 */
}
.requests-toolbar-mode-rail {
display: grid;
align-items: center;
justify-items: end;
flex-shrink: 0;
}
.requests-toolbar-mode-group {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 8px;
justify-self: end;
transform-origin: right center;
}
.requests-toolbar-mode-group--active {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
}
.requests-toolbar-mode-group--inactive {
opacity: 0;
transform: translateY(-6px) scale(0.985);
visibility: hidden;
pointer-events: none;
}
.filter-right--selecting .ctx-default {
opacity: 0;
transform: translateX(8px) scale(0.95);
max-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
pointer-events: none;
border: none !important;
}
/* When both filters active AND rows selected: fully remove from flex layout so gap: 8px doesn't create phantom spacing */
.filter-right--selecting.filter-right--filtered .ctx-default {
display: none !important;
}
/* Contextual elements — hidden at rest, spring in when rows selected */
.ctx-sel {
display: none !important; /* !important beats any class-level display override */
opacity: 0;
transform: translateY(-3px) scale(0.96);
pointer-events: none;
}
.filter-right--selecting .ctx-sel {
display: inline-flex !important; /* override ctx-sel's !important */
align-items: center;
opacity: 1;
transform: translateY(0) scale(1);
margin: 0 !important;
pointer-events: all;
animation: ctx-filter-slide 0.58s var(--ease) both;
}
/* Stagger delays */
.filter-right--selecting #ctxCopyBtn { animation-delay: 0ms; }
.filter-right--selecting #ctxExportBtn { animation-delay: 40ms; }
.filter-right--selecting #bulkSelectPill { animation-delay: 80ms; }
.filter-right--selecting #ctxDeselBtn { animation-delay: 80ms; }
/* PER ctx-sel stagger — mirrors HCR timing */
.filter-right--selecting #perCtxCopyBtn { animation-delay: 0ms; }
.filter-right--selecting #perCtxExportBtn { animation-delay: 40ms; }
.filter-right--selecting #perBulkSelectPill { animation-delay: 80ms; }
.filter-right--selecting #perCtxDeselectBtn { animation-delay: 80ms; }
/* ── Contextual filter toolbar (shown when active filters exist) ─────────── */
.ctx-filter {
display: none !important;
opacity: 0;
transform: translateY(-3px) scale(0.96);
pointer-events: none;
}
.filter-right--filtered .ctx-filter {
display: inline-flex !important;
align-items: center;
opacity: 1;
transform: translateX(0);
pointer-events: all;
animation: ctx-filter-slide 0.58s var(--ease) both;
}
/* Stagger: Density slides in first, Saved Filters follows */
.filter-right--filtered #densityBtn { animation-delay: 0ms; }
.filter-right--filtered .sf-wrap { animation-delay: 60ms; }
/* PER ctx-filter stagger — #perSfWrap gets 60ms from .sf-wrap rule above */
.filter-right--filtered #perDensityBtn { animation-delay: 0ms; }
/* Slide in from the right — visually originates from the ⋯ menu */
@keyframes ctx-filter-slide {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
/* Selection count chip (inside rowCountBadge) */
.row-count-badge--selecting {
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: var(--primary);
font-weight: 700;
border-radius: var(--radius-pill);
padding: 2px 10px;
transition: background 200ms ease, color 200ms ease;
}
/* Contextual copy / export buttons */
#ctxCopyBtn, #ctxExportBtn {
white-space: nowrap;
gap: 6px;
}
/* Deselect × button */
.ctx-desel-btn {
color: var(--text-tertiary) !important;
padding: 4px 6px !important;
}
.ctx-desel-btn:hover { color: var(--red) !important; }
/* Bulk Edit dropdown in contextual bar */
.ctx-bulk-trigger {
display: flex; align-items: center; gap: 6px;
white-space: nowrap;
}
.ctx-bulk-caret {
transition: transform 180ms cubic-bezier(0.16,1,0.3,1);
flex-shrink: 0;
}
.ctx-bulk-trigger.open .ctx-bulk-caret { transform: rotate(180deg); }
.ctx-bulk-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.12);
z-index: 200;
padding: 4px 0;
animation: tov-in 180ms cubic-bezier(0.16,1,0.3,1) both;
}
/* Export column list */
.export-col-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; max-height: 200px; overflow-y: auto; padding: 4px 0; }
.export-col-list::-webkit-scrollbar { width: 4px; }
.export-col-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
.export-col-item {
display: flex; align-items: center; gap: 7px;
padding: 6px 10px; border-radius: var(--radius-m);
border: 1px solid var(--border); background: var(--surface-2);
cursor: default; transition: border-color var(--t-fast), background var(--t-fast);
user-select: none;
}
.export-col-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.export-col-item.export-col-dragging { opacity: 0.5; border-style: dashed; }
.export-col-item.export-col-over { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(124,70,241,.2); }
.export-col-drag { font-size: 14px; color: var(--text-tertiary); cursor: grab; line-height: 1; }
.export-col-drag:active { cursor: grabbing; }
.export-col-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-primary); cursor: pointer; }
.export-col-label input { margin: 0; }
.cu-cell .cu-status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── ClickUp column cell — hard-contain content, no overflow ── */
.col-clickup-cell {
max-width: 180px;
width: 180px;
overflow: visible;
position: relative;
z-index: 1;
}
.cu-cell {
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
width: 100%;
max-width: 176px;
min-width: 0;
overflow: visible;
position: relative;
}
.cu-cell .cu-status-badge {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.cu-hover-card {
position: absolute;
top: -8px;
left: 0;
width: min(320px, calc(100vw - 64px));
padding: 12px 13px;
border-radius: var(--radius-m);
border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
background: color-mix(in srgb, var(--surface) 97%, white 3%);
box-shadow: 0 16px 28px rgba(28, 22, 56, 0.16), 0 2px 0 rgba(124,70,241,0.08);
opacity: 0;
transform: translateY(6px) scale(0.985);
transform-origin: top left;
pointer-events: none;
transition: opacity 140ms var(--ease), transform 140ms var(--ease);
z-index: 35;
}
.col-clickup-cell:hover,
.col-clickup-cell:focus-within {
z-index: 40;
}
.col-clickup-cell:hover .cu-hover-card,
.col-clickup-cell:focus-within .cu-hover-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.cu-hover-card-title {
display: flex;
align-items: flex-start;
gap: 7px;
color: var(--text-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.cu-hover-card-title span {
flex: 1 1 auto;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.cu-hover-card-title svg {
width: 12px;
height: 12px;
flex-shrink: 0;
margin-top: 2px;
}
.cu-hover-card-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 9px;
}
.cu-hover-card-meta .cu-status-badge {
max-width: 100%;
}
.cu-hover-status-empty {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
}
body.dark .cu-hover-card {
background: color-mix(in srgb, var(--surface) 94%, #000 6%);
border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(124,70,241,0.16);
}
/* =============================================
Kekabot — Ask Kekabot AI Assistant
============================================= */
/* ── Animations ─────────────────────────────── */
@keyframes kbFadeUp {
0% { opacity: 0; transform: translateY(16px) scale(0.96); }
30% { opacity: 1; }
100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kbPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* ── Nav item highlight ──────────────────────── */
.kb-nav-item .nav-item-icon svg {
transition: filter 0.2s ease;
}
.kb-nav-item.active .nav-item-icon svg,
.kb-nav-item:hover .nav-item-icon svg {
filter: drop-shadow(0 0 4px rgba(124,70,241,0.5));
}
/* AI aurora shimmer on Ask Kekabot label + icon */
@keyframes kb-aurora {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes kb-icon-aurora {
0% { color: #7c46f1; filter: drop-shadow(0 0 3px rgba(124,70,241,.5)); }
25% { color: #60a5fa; filter: drop-shadow(0 0 4px rgba(96,165,250,.5)); }
50% { color: #34d399; filter: drop-shadow(0 0 4px rgba(52,211,153,.5)); }
75% { color: #a78bfa; filter: drop-shadow(0 0 4px rgba(167,139,250,.5)); }
100% { color: #7c46f1; filter: drop-shadow(0 0 3px rgba(124,70,241,.5)); }
}
.kb-label-ai {
background: linear-gradient(
120deg,
#7c46f1 0%,
#a78bfa 20%,
#60a5fa 40%,
#34d399 60%,
#a78bfa 80%,
#7c46f1 100%
);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: kb-aurora 4s ease infinite;
}
.kb-icon-ai {
animation: kb-icon-aurora 4s ease infinite;
}
.kb-nav-item.active .kb-label-ai,
.kb-nav-item:hover .kb-label-ai {
animation-duration: 2s;
}
.kb-nav-item.active .kb-icon-ai,
.kb-nav-item:hover .kb-icon-ai {
animation-duration: 2s;
}
/* collapsed: dot badge on icon replaces text pill */
.kb-nav-item .nav-item-icon.kb-icon-ai { position: relative; }
.kb-nav-item .nav-item-icon.kb-icon-ai::after {
content: '';
position: absolute;
top: -2px; right: -2px;
width: 6px; height: 6px;
border-radius: 50%;
background: #7c46f1;
border: 1.5px solid var(--surface, #fff);
opacity: 0;
pointer-events: none;
transition: opacity .2s;
}
.nav-rail.collapsed .kb-nav-item .nav-item-icon.kb-icon-ai::after {
opacity: 1;
animation: kb-dot-pulse 2s ease infinite;
}
@keyframes kb-dot-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(124,70,241,.5); }
50% { box-shadow: 0 0 0 4px rgba(124,70,241,0); }
}
.kb-beta-tag {
font-size: 9px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 1px 5px;
border-radius: 99px;
background: linear-gradient(120deg, rgba(124,70,241,.15), rgba(96,165,250,.15));
border: 1px solid rgba(124,70,241,.25);
color: #7c46f1;
margin-left: auto;
flex-shrink: 0;
line-height: 1.5;
align-self: center;
}
/* ── Page container ─────────────────────────── */
#view-kekabot {
overflow-y: auto;
}
.kb-page {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
min-height: 100%;
background:
radial-gradient(circle at top right, rgba(124,70,241,.07), transparent 35%),
linear-gradient(180deg, rgba(255,255,255,.4), transparent 22%),
var(--bg);
}
body.dark .kb-page {
background:
radial-gradient(circle at top right, rgba(124,70,241,.10), transparent 35%),
var(--bg);
}
/* ── Glass Hero Card ─────────────────────────── */
.kb-hero-card {
margin: 24px 24px 0;
background: rgba(255,255,255,0.72);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
border: 1.5px solid rgba(255,255,255,0.95);
border-radius: var(--radius-xl);
padding: 28px 28px 22px;
box-shadow:
0 1px 0 rgba(255,255,255,1) inset,
0 8px 40px rgba(124,70,241,0.08),
0 2px 8px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
/* Faint purple shimmer in corner */
.kb-hero-card::before {
content: '';
position: absolute;
top: -60px; right: -60px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(124,70,241,0.07), transparent 70%);
pointer-events: none;
}
body.dark .kb-hero-card {
background: rgba(22,18,38,0.75);
border-color: rgba(124,70,241,0.2);
box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.dark .kb-hero-card::before {
background: radial-gradient(circle, rgba(124,70,241,0.12), transparent 70%);
}
/* Lottie idle — absolute top-right decoration */
.kb-lottie-idle {
position: absolute;
top: 12px; right: 16px;
width: 130px; height: 100px;
pointer-events: none;
opacity: 0.85;
}
.kb-hero-inner {
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
z-index: 1;
}
/* Eyebrow label */
.kb-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.75;
}
/* Gradient title */
.kb-hero-title {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.7px;
line-height: 1.1;
margin: 0;
background: linear-gradient(130deg, var(--text-primary) 20%, var(--primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.dark .kb-hero-title {
background: linear-gradient(130deg, #f0ecff 10%, #a78bfa 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.kb-hero-sub {
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
margin: -6px 0 0;
max-width: 420px;
}
/* ── Query bar — rotating colorful Border Beam, nothing else ──────────────────────────
Beam = conic gradient on the BORDER-BOX layer; a solid surface layer clipped to the
PADDING-BOX hides the interior, so colour shows only in the 2px transparent border.
background-clip method = bulletproof cross-browser (the old mask-composite ring was
rendering as a full fill in Safari/older WebKit). Spin via @property --bb-angle.
No pulse, no glow halo. Loading just spins faster (rule below). ── */
.kb-query-bar {
display: flex;
align-items: center;
gap: 10px;
border: 2px solid transparent;
border-radius: var(--radius-l);
padding: 12px 14px;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
conic-gradient(from var(--bb-angle),
#7C46F1, #BF5AF2, #0A84FF, #32ADE6, #5E5CE6, #7C46F1) border-box;
animation: bb-rotate 4s linear infinite;
}
.kb-query-bar.kb-loading {
animation-duration: 1.2s; /* loading cue: faster beam (replaced old kb-glow-loading) */
}
.kb-query-bar--panel {
border-radius: var(--radius-m);
padding: 8px 12px;
}
.kb-search-icon {
color: var(--primary);
flex-shrink: 0;
opacity: 0.6;
}
.kb-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
font-family: inherit;
}
.kb-input::placeholder { color: var(--text-tertiary); }
/* Gradient shimmer Ask button */
.kb-ask-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #7C46F1 0%, #9B6BF2 100%);
color: #fff;
border: none;
border-radius: var(--radius-m);
padding: 10px 18px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
font-family: inherit;
position: relative;
overflow: hidden;
box-shadow: 0 2px 10px rgba(124,70,241,0.35);
transition:
transform 0.22s cubic-bezier(0.34,1.38,0.64,1),
box-shadow 0.22s ease,
opacity 0.15s;
}
/* Shimmer sweep */
.kb-ask-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.kb-ask-btn:hover::before { transform: translateX(100%); }
.kb-ask-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(124,70,241,0.45);
}
.kb-ask-btn:active { transform: scale(0.96); box-shadow: none; }
.kb-ask-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.kb-ask-btn--sm { padding: 6px 12px; font-size: 12px; gap: 4px; }
/* ── Suggested queries ───────────────────────── */
.kb-suggested {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
.kb-suggested-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-right: 2px;
flex-shrink: 0;
}
.kb-suggested-chip {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 5px 13px;
cursor: pointer;
font-family: inherit;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s,
transform 0.2s cubic-bezier(0.34,1.38,0.64,1),
box-shadow 0.15s;
}
.kb-suggested-chip:hover {
background: var(--primary-soft);
color: var(--primary);
border-color: rgba(124,70,241,0.3);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(124,70,241,0.18);
}
/* Meta row — status badge + reindex */
.kb-hero-meta {
display: flex;
align-items: center;
gap: 8px;
}
.kb-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: var(--primary);
background: var(--primary-soft);
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.03em;
}
.kb-status-badge--empty {
color: var(--text-tertiary);
background: var(--surface-2);
}
.kb-reindex-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 3px 9px;
cursor: pointer;
font-family: inherit;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.kb-reindex-btn:hover {
color: var(--primary);
border-color: rgba(124,70,241,0.3);
background: var(--primary-soft);
}
.kb-reindex-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* ── States ──────────────────────────────────── */
.kb-states {
padding: 20px 28px 0;
}
.kb-state { }
.kb-hidden { display: none !important; }
.kb-idle-hint {
text-align: center;
color: var(--text-tertiary);
font-size: 13px;
padding: 40px 0 20px;
}
/* Loading */
.kb-lottie-thinking {
width: 120px;
height: 90px;
margin: 0 auto;
}
.kb-loading-text {
text-align: center;
font-size: 13px;
color: var(--text-secondary);
margin-top: 8px;
animation: kbPulse 1.8s ease-in-out infinite;
}
/* ── Answer card ─────────────────────────────── */
.kb-card {
position: relative;
background: color-mix(in srgb, var(--surface) 92%, white 8%);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.kb-card--animate {
animation: kbFadeUp 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
/* Left accent strip */
.kb-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.kb-strip--high::before { background: var(--primary); }
.kb-strip--partial::before { background: var(--amber); }
.kb-strip--low::before { background: var(--border); }
/* Glass sheen */
.kb-card::after {
content: '';
position: absolute;
inset: 1px 1px auto 1px;
height: 38%;
border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 10px 10px;
background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
body.dark .kb-card::after { background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 100%); }
.kb-card--notfound::before { background: var(--border); }
.kb-card-inner {
padding: 18px 20px 18px 22px;
display: flex;
flex-direction: column;
gap: 14px;
}
.kb-card--compact .kb-card-inner {
padding: 14px 16px 14px 18px;
gap: 10px;
}
/* Confidence row */
.kb-conf-row {
display: flex;
align-items: center;
gap: 7px;
}
.kb-conf-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.kb-conf--high .kb-conf-dot, .kb-conf-dot.kb-conf--high { background: var(--primary); box-shadow: 0 0 0 3px rgba(124,70,241,0.18); }
.kb-conf--partial .kb-conf-dot, .kb-conf-dot.kb-conf--partial { background: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.kb-conf--low .kb-conf-dot, .kb-conf-dot.kb-conf--low { background: var(--text-tertiary); }
.kb-conf-label {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0.03em;
}
/* Field grid */
.kb-field-grid {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px 12px;
align-items: start;
}
.kb-field-grid-compact {
display: grid;
grid-template-columns: 80px 1fr;
gap: 6px 10px;
}
.kb-fl {
font-size: 11px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
padding-top: 1px;
}
.kb-fv {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.4;
}
/* Note */
.kb-note {
font-size: 12px;
color: var(--text-secondary);
background: var(--surface-2);
border-radius: var(--radius-m);
padding: 8px 12px;
line-height: 1.5;
}
/* Source link */
.kb-source-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
border: 1px solid rgba(124,70,241,0.2);
background: var(--primary-soft);
border-radius: var(--radius-m);
padding: 5px 10px;
transition: background 0.15s, border-color 0.15s;
align-self: flex-start;
}
.kb-source-link:hover {
background: rgba(124,70,241,0.15);
border-color: rgba(124,70,241,0.35);
}
/* Actions row */
.kb-actions-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.kb-refine-btn {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 5px 12px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
font-family: inherit;
}
.kb-refine-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); }
.kb-flag-btn {
font-size: 12px;
font-weight: 600;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid rgba(124,70,241,0.2);
border-radius: var(--radius-m);
padding: 5px 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
font-family: inherit;
}
.kb-flag-btn:hover { background: rgba(124,70,241,0.15); border-color: rgba(124,70,241,0.35); }
/* Lottie in success position */
.kb-lottie-success {
position: absolute;
top: 10px;
right: 14px;
width: 50px;
height: 50px;
pointer-events: none;
z-index: 1;
}
/* Not found card — pure not-found (lottie + text side by side) */
.kb-card--notfound .kb-card-inner {
flex-direction: row;
align-items: center;
gap: 16px;
}
.kb-lottie-nf {
width: 80px;
height: 80px;
flex-shrink: 0;
}
.kb-nf-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.kb-nf-text strong {
font-size: 14px;
color: var(--text-primary);
font-weight: 700;
}
.kb-nf-text span {
font-size: 12px;
color: var(--text-secondary);
}
/* Not found but tracker match exists — column layout */
.kb-card--has-tracker::before { background: var(--border); }
.kb-card--has-tracker .kb-card-inner {
flex-direction: column;
gap: 12px;
}
.kb-nf-notice {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
color: var(--text-tertiary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 3px 10px;
align-self: flex-start;
}
.kb-nf-notice svg { flex-shrink: 0; }
/* Groq unavailable card */
.kb-card--groq-unavailable::before { background: var(--amber); }
.kb-card--groq-unavailable .kb-card-inner { flex-direction: column; gap: 10px; }
.kb-groq-unavail-header {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--amber);
}
.kb-groq-unavail-sub {
font-size: 12px;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
}
.kb-groq-unavail-sub a { color: var(--primary); text-decoration: none; }
.kb-groq-unavail-sub a:hover { text-decoration: underline; }
.kb-groq-unavail-fallback {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Row highlight flash when navigating from Kekabot */
@keyframes kbRowFlash {
0% { background: rgba(124,70,241,0.18); }
60% { background: rgba(124,70,241,0.12); }
100% { background: transparent; }
}
.kb-row-flash {
animation: kbRowFlash 2s ease-out forwards;
}
/* ── Session history ─────────────────────────── */
.kb-history {
padding: 20px 28px 28px;
}
.kb-history-label {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
margin-bottom: 10px;
}
.kb-chips-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.kb-chip {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border);
background: var(--surface);
border-radius: var(--radius-l);
padding: 6px 12px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.2s cubic-bezier(0.34,1.38,0.64,1);
font-family: inherit;
}
.kb-chip:hover {
border-color: rgba(124,70,241,0.3);
background: var(--primary-soft);
transform: translateY(-1px);
}
.kb-chip-q { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.kb-chip-badge { font-size: 10px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.04em; }
.kb-chip--high .kb-chip-badge { color: var(--primary); }
.kb-chip--partial .kb-chip-badge { color: var(--amber); }
.kb-chip--miss .kb-chip-badge { color: var(--text-tertiary); }
/* ── Slide-over panel ────────────────────────── */
.kb-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 998;
opacity: 0;
transition: opacity 0.25s ease;
}
.kb-backdrop--open {
display: block;
opacity: 1;
}
.kb-panel {
position: fixed;
top: 0;
right: 0;
width: 420px;
height: 100vh;
background: var(--bg);
border-left: 1px solid var(--border);
box-shadow: -8px 0 48px rgba(0,0,0,0.16), -1px 0 0 rgba(124,70,241,0.06);
z-index: 999;
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(100%); /* resting off-screen */
}
/* Opening — same spring as filter panel */
.kb-panel--open {
will-change: transform, opacity;
animation: panel-slide-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform: translateX(0);
}
/* Closing — ease-in for snappy dismiss */
.kb-panel--closing {
will-change: transform, opacity;
animation: panel-slide-out 240ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}
/* Panel header — glass strip */
.kb-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
}
.kb-panel-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.2px;
}
.kb-panel-title svg { color: var(--primary); }
.kb-panel-kbd {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 5px;
padding: 2px 6px;
font-family: inherit;
letter-spacing: 0.02em;
}
/* Panel body — scrollable */
.kb-panel-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
overflow-y: auto;
scrollbar-width: thin;
}
/* Panel input bar — compact variant */
.kb-panel-body .kb-query-bar {
border-radius: var(--radius-m);
padding: 9px 12px;
border-width: 1.5px;
border-color: transparent; /* keep border as the beam window */
/* re-declare the beam bg here so this higher-specificity rule doesn't flatten it to solid */
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
conic-gradient(from var(--bb-angle),
#7C46F1, #BF5AF2, #0A84FF, #32ADE6, #5E5CE6, #7C46F1) border-box;
}
.kb-panel-body .kb-input { font-size: 13px; }
.kb-panel-body .kb-ask-btn { padding: 7px 14px; font-size: 12px; gap: 4px; }
.kb-panel-hint {
font-size: 12px;
color: var(--text-tertiary);
text-align: center;
padding: 24px 0 16px;
line-height: 1.5;
}
.kb-panel-result {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Compact answer card in panel */
.kb-answer--compact .kb-answer-body {
padding: 14px 16px 12px;
gap: 10px;
}
.kb-answer--compact .kb-answer-conf-pill {
font-size: 10px;
padding: 3px 9px;
}
.kb-answer--compact .kb-pf-item {
padding: 9px 11px;
}
.kb-answer--compact .kb-pf-val {
font-size: 13px;
}
.kb-answer--compact .kb-source-footer-link {
padding: 8px 10px;
}
.kb-answer--compact .kb-source-footer-name {
font-size: 11px;
}
.kb-answer--compact .kb-cf-section {
gap: 7px;
}
.kb-answer--compact .kb-cf-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px 10px;
}
.kb-answer--compact .kb-per-answer-summary {
font-size: 13px;
line-height: 1.55;
}
.kb-panel-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 20px 0;
}
.kb-panel-thinking-lottie {
width: 80px;
height: 60px;
}
.kb-panel-loading span {
font-size: 12px;
color: var(--text-secondary);
animation: kbPulse 1.8s ease-in-out infinite;
}
.kb-panel-error {
font-size: 12px;
color: var(--red);
background: var(--red-soft);
border-radius: var(--radius-m);
padding: 10px 12px;
}
/* ── Custom fields section ───────────────────── */
.kb-cf-section {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.kb-cf-section--compact { gap: 8px; }
.kb-cf-header {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
/* 2-column grid — minmax(0,1fr) forces hard 50% bounds regardless of badge/nowrap content */
.kb-cf-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px 16px;
}
.kb-cf-section--compact .kb-cf-grid {
gap: 8px 12px;
}
.kb-cf-item {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0; /* allow grid item to shrink below content min-width */
}
.kb-cf-label {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.kb-cf-badge {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid transparent;
letter-spacing: 0.01em;
line-height: 1.5;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
align-self: flex-start;
}
.kb-cf-badge--neutral {
background: var(--surface-2);
color: var(--text-secondary);
border-color: var(--border);
}
/* Colored badge — dark text in light mode, brighter in dark mode */
.kb-cf-badge--colored {
color: color-mix(in srgb, var(--kb-pill-color) 55%, #0d0d1a 45%);
}
body.dark .kb-cf-badge--colored {
color: color-mix(in srgb, var(--kb-pill-color) 75%, #ffffff 25%);
}
/* ── CX Tracker match banner ────────────────── */
.kb-tracker-section {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
background: color-mix(in srgb, var(--primary-soft) 60%, var(--surface) 40%);
border: 1px solid rgba(124,70,241,0.22);
border-radius: var(--radius-l);
animation: kbFadeUp 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
/* "Also tracked" variant — neutral, muted, part of the card flow */
.kb-tracker-section--also {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding-top: 12px;
margin-top: 2px;
}
.kb-tracker-section-header {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
}
/* Muted header for "also" mode */
.kb-tracker-section-header--also {
color: var(--text-tertiary);
}
/* Card inside "also" section inherits neutral bg */
.kb-tracker-section--also .kb-tm-card,
.kb-tm-card--also {
background: var(--surface);
border-color: var(--border);
}
.kb-tm-card {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 10px 12px;
}
.kb-tm-card + .kb-tm-card { margin-top: 6px; }
.kb-tm-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.kb-tm-customers {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
flex: 1;
line-height: 1.3;
}
.kb-tm-badges {
display: flex;
gap: 5px;
flex-shrink: 0;
flex-wrap: wrap;
justify-content: flex-end;
}
.kb-tm-badge {
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid transparent;
white-space: nowrap;
}
.kb-tm-status {
font-size: 10px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-secondary);
border: 1px solid var(--border);
white-space: nowrap;
}
.kb-tm-module {
font-size: 11px;
color: var(--text-secondary);
font-weight: 600;
}
.kb-tm-meta {
display: flex;
gap: 10px;
font-size: 11px;
color: var(--text-tertiary);
font-weight: 500;
flex-wrap: wrap;
}
.kb-tm-actions {
display: flex;
gap: 6px;
margin-top: 2px;
}
.kb-tm-detail-btn,
.kb-tm-view-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
padding: 5px 11px;
border-radius: var(--radius-m);
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.18s cubic-bezier(0.34,1.38,0.64,1);
font-family: inherit;
border: 1px solid transparent;
position: relative;
overflow: hidden;
white-space: nowrap;
}
.kb-tm-detail-btn:hover,
.kb-tm-view-btn:hover { transform: translateY(-1px); }
.kb-tm-detail-btn {
background: var(--surface-2);
color: var(--text-secondary);
border-color: var(--border);
}
.kb-tm-detail-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); }
.kb-tm-view-btn {
background: var(--primary);
color: #fff;
border-color: var(--primary);
box-shadow: var(--shadow-primary);
transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform 0.22s cubic-bezier(0.34,1.38,0.64,1), box-shadow 0.22s ease;
}
.kb-tm-view-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform 0.5s ease;
pointer-events: none;
}
.kb-tm-view-btn:hover::before { transform: translateX(100%); }
.kb-tm-view-btn:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(124,70,241,0.42);
}
.kb-tm-view-btn:active { transform: scale(0.96); box-shadow: var(--shadow-primary); }
.kb-tm-view-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* ── Description ────────────────────────────── */
.kb-desc-section {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.kb-desc-body {
font-size: 12.5px;
line-height: 1.75;
color: var(--text-secondary);
white-space: pre-wrap;
max-height: 160px;
overflow-y: auto;
border-radius: var(--radius-m);
background: var(--surface-2);
padding: 10px 12px;
scrollbar-width: thin;
}
.kb-desc-body a { color: var(--primary); text-decoration: none; }
.kb-desc-body a:hover { text-decoration: underline; }
.kb-desc-body strong { color: var(--text-primary); font-weight: 700; }
.kb-desc-body em { font-style: italic; }
/* ── Comments ────────────────────────────────── */
.kb-comments-section {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.kb-comment {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--surface-2);
border-radius: var(--radius-m);
padding: 10px 12px;
border: 1px solid var(--border);
}
.kb-comment-header {
display: flex;
align-items: center;
gap: 7px;
}
.kb-comment-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
font-size: 9px;
font-weight: 800;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.kb-comment-author {
font-size: 11px;
font-weight: 700;
color: var(--text-primary);
}
.kb-comment-date {
font-size: 10px;
color: var(--text-tertiary);
margin-left: auto;
}
/* Bot/automation comment */
.kb-comment--bot {
background: color-mix(in srgb, var(--surface-2) 70%, var(--amber-soft) 30%);
border-color: rgba(217,119,6,0.18);
}
.kb-comment-avatar--bot {
background: var(--amber-soft);
color: var(--amber);
font-size: 11px;
}
.kb-comment-bot-badge {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--amber);
background: var(--amber-soft);
border: 1px solid rgba(217,119,6,0.25);
border-radius: 999px;
padding: 1px 6px;
}
.kb-comment-body {
font-size: 12px;
line-height: 1.65;
color: var(--text-secondary);
white-space: pre-wrap;
word-break: break-word;
}
.kb-comment-body a { color: var(--primary); text-decoration: none; }
.kb-comment-body a:hover { text-decoration: underline; }
.kb-comment-body strong { color: var(--text-primary); font-weight: 700; }
.kb-comment-body em { font-style: italic; }
/* Dark mode adjustments */
body.dark .kb-card {
background: color-mix(in srgb, var(--surface) 94%, #000 6%);
}
body.dark .kb-ask-btn:hover {
box-shadow: 0 8px 28px rgba(124,70,241,0.55);
}
body.dark .kb-lottie-idle { opacity: 0.7; }
/* ── Revamped Answer Card ────────────────────── */
@keyframes kbAnswerIn {
0% { opacity: 0; transform: translateY(22px); }
28% { opacity: 1; }
100%{ opacity: 1; transform: translateY(0); }
}
.kb-answer {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow:
var(--shadow),
0 0 0 1px rgba(255,255,255,0.6) inset;
overflow: hidden;
}
.kb-answer.kb-card--animate {
animation: kbAnswerIn 0.38s cubic-bezier(0.16,1,0.3,1) both;
}
/* Top accent gradient bar */
.kb-answer-accent {
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.kb-answer--high .kb-answer-accent { background: linear-gradient(90deg, #7C46F1, #a78bfa); }
.kb-answer--partial .kb-answer-accent { background: linear-gradient(90deg, var(--amber), #fbbf24); }
.kb-answer--low .kb-answer-accent { background: var(--border); }
/* Subtle top-left glass sheen */
.kb-answer::before {
content: '';
position: absolute;
inset: 1px 1px auto 1px;
height: 36%;
border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 12px 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
pointer-events: none;
}
body.dark .kb-answer::before {
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
}
.kb-answer-body {
padding: 20px 22px 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Header: conf pill */
.kb-answer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 4px;
}
.kb-answer-conf-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 4px 11px;
border-radius: 999px;
border: 1.5px solid transparent;
}
.kb-answer-conf-pill--high {
background: var(--primary-soft);
color: var(--primary);
border-color: rgba(124,70,241,0.22);
}
.kb-answer-conf-pill--partial {
background: var(--amber-soft);
color: var(--amber);
border-color: rgba(217,119,6,0.22);
}
.kb-answer-conf-pill--low {
background: var(--surface-2);
color: var(--text-tertiary);
border-color: var(--border);
}
.kb-per-answer-program {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.kb-per-answer-summary {
font-size: 15px;
font-weight: 600;
line-height: 1.65;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.kb-per-answer-note {
margin-top: -2px;
}
/* Primary fields: Status + ETA large callouts */
.kb-primary-fields {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.kb-pf-item {
flex: 1;
min-width: 130px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-l);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.kb-pf-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.kb-pf-val {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
/* Source footer */
.kb-source-footer {
border-top: 1px solid var(--border);
padding-top: 12px;
margin-top: 2px;
}
.kb-source-footer-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-m);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.kb-source-footer-link:hover {
background: var(--primary-soft);
border-color: rgba(124,70,241,0.28);
box-shadow: 0 2px 8px rgba(124,70,241,0.12);
}
.kb-source-footer-link svg {
color: var(--primary);
flex-shrink: 0;
opacity: 0.7;
}
.kb-source-footer-name {
font-size: 12px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kb-source-footer-id {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
font-family: 'SF Mono', 'Fira Code', monospace;
flex-shrink: 0;
}
.kb-source-footer-open {
font-size: 11px;
font-weight: 700;
color: var(--primary);
flex-shrink: 0;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.15s, transform 0.15s;
}
.kb-source-footer-link:hover .kb-source-footer-open {
opacity: 1;
transform: translateX(0);
}
body.dark .kb-answer {
background: color-mix(in srgb, var(--surface) 94%, #000 6%);
box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
body.dark .kb-pf-item {
background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}
body.dark .kb-source-footer-link {
background: color-mix(in srgb, var(--surface) 90%, #000 10%);
}
body.dark .kb-source-footer-link:hover {
background: rgba(124,70,241,0.12);
}
/* =============================================
QoL #5 — Row Quick Actions Bar (icon-only)
============================================= */
@keyframes rabSlideIn {
from { opacity: 0; transform: translateX(6px); }
to { opacity: 1; transform: translateX(0); }
}
.rab {
position: fixed;
display: flex;
align-items: center;
gap: 3px;
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.8) inset;
padding: 3px 5px;
z-index: 90;
animation: rabSlideIn 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
body.dark .rab {
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.rab.hidden { display: none; }
.rab-divider {
width: 1px;
height: 16px;
background: var(--border);
margin: 0 2px;
flex-shrink: 0;
}
.rab-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--text-tertiary);
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
font-family: inherit;
transition: background 0.12s, color 0.12s, transform 0.15s cubic-bezier(0.34,1.38,0.64,1);
flex-shrink: 0;
}
.rab-btn:hover {
background: var(--surface-2);
color: var(--primary);
transform: scale(1.15);
}
.rab-btn--flag:hover { color: var(--amber); }
.rab-btn--flag-on { color: var(--red) !important; }
.rab-btn--flag-on:hover { background: var(--red-soft); color: var(--red) !important; }
/* =============================================
QoL #7 — Inline Remarks Editor
============================================= */
.col-remarks-editable { cursor: pointer; }
.col-remarks-editable:hover span { color: var(--text-primary) !important; }
.ire-hint-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary);
font-size: 10px;
font-weight: 800;
margin-left: 5px;
opacity: 0;
transition: opacity 0.15s;
vertical-align: middle;
}
.col-remarks-editable:hover .ire-hint-icon { opacity: 1; }
.ire {
position: absolute;
width: 300px;
background: var(--surface);
border: 1.5px solid var(--primary);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg), 0 0 0 4px rgba(124,70,241,0.1);
z-index: 10000; /* above text-popover (9999) so hover popover never covers the editor */
overflow: hidden;
animation: kbFadeUp 0.15s ease both;
}
.ire.hidden { display: none; }
.ire-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 4px;
}
.ire-label { font-size: 11px; font-weight: 700; color: var(--primary); }
.ire-hint { font-size: 10px; color: var(--text-tertiary); }
.ire-input-wrap { position: relative; }
.ire-ghost-prefix {
position: absolute;
top: 4px; /* matches .ire-textarea padding-top */
left: 12px; /* matches .ire-textarea padding-left */
font-size: 12.5px; /* matches .ire-textarea */
line-height: 1.5; /* matches .ire-textarea */
font-family: inherit;
color: var(--text-tertiary);
pointer-events: none;
white-space: pre;
user-select: none;
transition: color var(--t-fast) ease;
}
.ire-ghost-prefix.hidden { display: none; }
.ire-ghost-prefix.is-typing { color: var(--primary); } /* user started typing */
.ire-textarea {
width: 100%;
border: none;
outline: none;
padding: 4px 12px 8px;
font-size: 12.5px;
font-family: inherit;
color: var(--text-primary);
background: transparent;
resize: none;
line-height: 1.5;
box-sizing: border-box;
}
.ire-footer {
display: flex;
justify-content: flex-end;
gap: 6px;
padding: 6px 10px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.ire-cancel {
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 4px 10px;
cursor: pointer;
font-family: inherit;
}
.ire-save { font-size: 11px; padding: 4px 10px; }
/* =============================================
QoL #12 — Auto-save Indicator
============================================= */
.autosave-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--radius-pill);
border: 1px solid rgba(22,163,74,0.18);
background: rgba(22,163,74,0.08);
font-size: 11.5px;
font-weight: 700;
color: var(--green);
letter-spacing: 0.01em;
transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.3s;
}
.autosave-indicator::before {
content: '';
width: 8px;
height: 8px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}
.autosave-indicator--saving {
color: var(--amber);
background: rgba(217,119,6,0.08);
border-color: rgba(217,119,6,0.2);
}
.autosave-indicator--error {
color: var(--red);
background: rgba(220,38,38,0.08);
border-color: rgba(220,38,38,0.2);
}
.autosave-indicator.hidden { display: none; }
/* =============================================
QoL #10 — Row Count Badge
============================================= */
.row-count-badge {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 4px 12px;
white-space: nowrap;
letter-spacing: 0.01em;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
/* Purple tint only when rows are selected */
.filter-right--selecting .row-count-badge {
color: var(--primary);
background: var(--primary-soft);
border-color: rgba(124,70,241,0.22);
font-weight: 700;
}
/* =============================================
QoL #6 — Table Density
============================================= */
/* Comfortable */
body.density-comfortable .data-table td,
body.density-comfortable .data-table th { padding: 14px 14px; }
/* Compact */
body.density-compact .data-table td,
body.density-compact .data-table th { padding: 5px 10px; font-size: 12px; }
body.density-compact .customer-chip { padding: 1px 6px; font-size: 10.5px; }
body.density-compact .badge { padding: 2px 7px; font-size: 10.5px; }
/* =============================================
QoL #3 — Saved Filter Sets
============================================= */
.sf-wrap { position: relative; }
/* Panel lives in document.body — position/top/left set via JS */
.sf-panel {
position: fixed;
width: 280px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg);
z-index: 300;
overflow: hidden;
animation: ctx-filter-slide 0.22s var(--ease) both;
}
.sf-panel.hidden { display: none !important; }
/* Header */
.sf-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 8px;
border-bottom: 1px solid var(--border);
}
.sf-title {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
/* Saved filter list */
.sf-list { max-height: 220px; overflow-y: auto; padding: 4px 0; scrollbar-width: thin; }
.sf-empty {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-tertiary);
padding: 12px 14px;
font-style: italic;
}
.sf-item {
display: flex;
align-items: center;
gap: 8px;
padding: 1px 8px;
margin: 1px 4px;
border-radius: var(--radius-m);
transition: background 0.12s, border-color 0.12s;
border: 1px solid transparent;
}
.sf-item:hover { background: var(--surface-2); }
.sf-apply {
flex: 1;
display: flex;
align-items: center;
gap: 7px;
text-align: left;
font-size: 12.5px;
font-weight: 500;
color: var(--text-primary);
background: none;
border: none;
padding: 7px 4px;
cursor: pointer;
font-family: inherit;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.sf-apply:hover { color: var(--primary); }
.sf-apply-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.sf-current-badge {
flex-shrink: 0;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(124,70,241,.1);
color: var(--primary);
font-size: 10px;
font-weight: 700;
}
.sf-delete {
flex-shrink: 0;
background: none;
border: none;
color: var(--text-tertiary);
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 4px 6px;
border-radius: var(--radius-s);
font-family: inherit;
opacity: 0;
transition: opacity 0.12s, color 0.12s;
}
.sf-item:hover .sf-delete { opacity: 1; }
.sf-delete:hover { color: var(--red); background: var(--red-soft); opacity: 1; }
.sf-footer {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.sf-footer-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-tertiary);
}
.sf-footer-row {
display: flex;
gap: 6px;
}
.sf-name-input {
flex: 1;
font-size: 12.5px;
font-family: inherit;
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 6px 10px;
background: var(--surface);
color: var(--text-primary);
outline: none;
min-width: 0;
}
.sf-name-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(124,70,241,0.1); }
.sf-save-btn { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
/* =============================================
QoL #4 — Bulk Action Strip
grid-template-rows transition = smooth open/close, no display:none snap
============================================= */
/* Strip hidden by default — only shows when Bulk Edit is ON and rows are selected */
/* Grid collapses height; opacity+transform fade the content in/out */
#bulkStripMount {
display: grid;
grid-template-rows: 0fr;
/* No overflow:hidden here — strip has its own; shadow must escape to show */
transition: grid-template-rows 0.42s var(--ease), padding 0.42s var(--ease);
padding: 0 24px;
}
#bulkStripMount.bulk-open {
grid-template-rows: 1fr;
padding: 6px 24px 10px; /* room for shadow + breathing space below */
}
.bulk-strip {
display: flex;
min-height: 0;
overflow: hidden;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px 14px;
/* Frosted glass pill — identical to .rab */
background: color-mix(in srgb, var(--surface) 85%, transparent);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid var(--border);
border-radius: var(--radius-l);
box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.8) inset;
opacity: 0;
transform: translateY(-6px) scale(0.988);
pointer-events: none;
transition:
opacity 0.36s ease,
transform 0.44s cubic-bezier(0.16, 1, 0.3, 1);
}
body.dark .bulk-strip {
background: color-mix(in srgb, var(--surface) 80%, transparent);
box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,0.05) inset;
}
#bulkStripMount.bulk-open .bulk-strip {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
}
/* PER bulk strip — same grid-collapse behaviour */
#perBulkStripMount {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.42s var(--ease), padding 0.42s var(--ease);
padding: 0 24px;
}
#perBulkStripMount.bulk-open {
grid-template-rows: 1fr;
padding: 6px 24px 10px;
}
#perBulkStripMount.bulk-open .bulk-strip {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
}
.bulk-strip-left {
display: flex;
align-items: baseline;
gap: 4px;
flex-shrink: 0;
}
.bulk-strip-count { font-size: 12px; font-weight: 800; color: var(--primary); letter-spacing: -0.3px; }
.bulk-strip-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.bulk-strip-actions { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: center; }
/* Status + Apply buttons — compact to match .rab popover scale */
.bulk-strip .btn-outlined,
.bulk-strip .btn-filled {
font-size: 11.5px;
padding: 4px 10px;
height: auto;
}
.bulk-strip .btn-filled svg,
.bulk-strip .btn-outlined svg { width: 12px; height: 12px; }
/* Status dropdown buttons — btn-outlined base + active override */
.bulk-pill-btn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.bulk-pill-btn--set {
background: var(--primary-soft) !important;
color: var(--primary) !important;
border-color: rgba(124,70,241,0.35) !important;
}
.bulk-pill-drop { z-index: 95 !important; }
/* Bulk Edit toggle label in filter bar */
.bulk-toggle-label {
display: inline-flex; /* ctx-sel's display:none !important hides this at rest */
align-items: center;
gap: 7px;
cursor: pointer;
user-select: none;
padding: 0 2px;
}
.bulk-toggle-text {
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
transition: color 0.15s;
}
.bulk-toggle-label:hover .bulk-toggle-text { color: var(--text-primary); }
/* Settings toggle component */
.settings-toggle {
position: relative;
display: inline-flex;
width: 40px;
height: 22px;
flex-shrink: 0;
cursor: pointer;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.settings-toggle-track {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: 999px;
transition: background 0.2s;
}
.settings-toggle-track::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s cubic-bezier(0.34,1.38,0.64,1), box-shadow 0.2s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle input:checked + .settings-toggle-track { background: var(--primary); }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(18px); }
/* =============================================
QoL #2 — Command Palette
============================================= */
/* ── Command Palette — macOS 26 Spotlight style ──────────────────────────── */
/* Overlay: light scrim + subtle blur (previous blur level restored) */
.cmd-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 999;
animation: cmd-overlay-in 180ms ease both;
}
.cmd-overlay.hidden { display: none; }
.cmd-overlay--closing { animation: cmd-overlay-out 150ms ease forwards !important; }
.cmd-palette {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(580px, 92vw);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow:
0 0 0 0.5px rgba(124,70,241,0.10),
0 4px 12px rgba(0,0,0,0.08),
0 16px 48px rgba(0,0,0,0.16),
0 40px 80px rgba(0,0,0,0.20);
z-index: 1000;
overflow: hidden;
/* GPU layer — essential for 120Hz smoothness */
will-change: transform, opacity;
/* iOS/macOS smooth spring — single arc, no stutter-prone overshoot stops */
animation: cmd-spotlight-in 480ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cmd-palette.hidden { display: none; }
/* Close — smooth collapse, eases in (mirrors open curve reversed) */
.cmd-palette--closing {
will-change: transform, opacity;
animation: cmd-spotlight-out 200ms cubic-bezier(0.7, 0, 1, 0.6) forwards !important;
}
/* Dark mode */
body.dark .cmd-palette {
background: color-mix(in srgb, var(--surface) 96%, #000);
border-color: rgba(124,70,241,0.22);
box-shadow:
0 0 0 0.5px rgba(124,70,241,0.18),
0 4px 12px rgba(0,0,0,0.22),
0 16px 48px rgba(0,0,0,0.38),
0 40px 80px rgba(0,0,0,0.42);
}
body.dark .cmd-overlay {
background: rgba(0,0,0,0.45);
}
/* ── Keyframes ────────────────────────────────────────────────────────────── */
/* Open — single smooth arc, 0.82→1.0, blur clears in first 30% of animation */
@keyframes cmd-spotlight-in {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
28% { opacity: 1; }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Close — mirror: collapses smoothly, no stutter */
@keyframes cmd-spotlight-out {
0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
}
@keyframes cmd-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmd-overlay-out { from { opacity: 1; } to { opacity: 0; } }
.cmd-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.cmd-icon { color: var(--text-tertiary); flex-shrink: 0; }
.cmd-input {
flex: 1;
border: none;
outline: none;
font-size: 15px;
font-weight: 500;
font-family: inherit;
background: transparent;
color: var(--text-primary);
}
.cmd-input::placeholder { color: var(--text-tertiary); }
.cmd-kbd {
font-size: 10px;
font-weight: 700;
color: var(--text-tertiary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 5px;
padding: 2px 6px;
font-family: inherit;
flex-shrink: 0;
}
.cmd-list {
max-height: 320px;
overflow-y: auto;
padding: 6px 0;
scrollbar-width: thin;
}
.cmd-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
cursor: pointer;
transition: background 0.1s;
}
.cmd-item:hover,
.cmd-item--active { background: var(--primary-soft); }
.cmd-item-label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.cmd-item--active .cmd-item-label { color: var(--primary); font-weight: 600; }
.cmd-empty {
font-size: 13px;
color: var(--text-tertiary);
text-align: center;
padding: 24px 16px;
}
/* dark mode cmd-palette handled above in the main cmd-palette block */
/* ── Shared dropdown animation (matches col-mgr spring feel, adapted for dropdowns) ── */
@keyframes dropdown-in {
0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
35% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dropdown-out {
0% { opacity: 1; transform: translateY(0) scale(1); }
100% { opacity: 0; transform: translateY(-5px) scale(0.96); }
}
/* Notifications panel — spring open, ease-in close */
.notif-panel:not(.hidden) {
animation: dropdown-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.notif-panel--closing {
animation: dropdown-out 180ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}
/* Saved views panel — same spring animation */
.sf-panel:not(.hidden) {
animation: dropdown-in 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sf-panel--closing {
animation: dropdown-out 180ms cubic-bezier(0.4, 0, 1, 0.8) forwards !important;
}
/* View Transitions API — theme crossfade (Chrome 111+, Safari 18+) */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 380ms;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Disable default cross-fade mix to avoid double-render flicker */
::view-transition-old(root) { animation-name: none; }
::view-transition-new(root) { animation-name: none; }
/* Fade old state out, new state in */
@keyframes theme-fade-out { to { opacity: 0; } }
@keyframes theme-fade-in { from { opacity: 0; } }
::view-transition-old(root) { animation: theme-fade-out 380ms cubic-bezier(0.4,0,0.2,1) both; }
::view-transition-new(root) { animation: theme-fade-in 380ms cubic-bezier(0.4,0,0.2,1) both; }
:root[data-view-morph]::view-transition-group(requests-surface) {
animation-duration: 720ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-view-morph]::view-transition-old(root) {
animation: requests-root-out 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-new(root) {
animation: requests-root-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-old(requests-surface) {
transform-origin: 50% 12%;
animation: requests-surface-out 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
:root[data-view-morph]::view-transition-new(requests-surface) {
transform-origin: 50% 12%;
animation: requests-surface-in 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes requests-root-out {
0% { opacity: 1; filter: saturate(1); }
100% { opacity: 0.96; filter: saturate(1.06); }
}
@keyframes requests-root-in {
0% { opacity: 0.96; filter: saturate(1.08); }
100% { opacity: 1; filter: saturate(1); }
}
@keyframes requests-surface-out {
0% {
opacity: 1;
filter: blur(0) saturate(1);
transform: translateY(0) scale(1);
clip-path: inset(0 round 22px);
}
48% {
opacity: 0.74;
filter: blur(10px) saturate(1.08);
}
100% {
opacity: 0;
filter: blur(18px) saturate(1.16);
transform: translateY(18px) scale(0.965);
clip-path: inset(10% 6% 12% 6% round 30px);
}
}
@keyframes requests-surface-in {
0% {
opacity: 0;
filter: blur(20px) saturate(1.18);
transform: translateY(-18px) scale(1.025);
clip-path: inset(12% 8% 10% 8% round 30px);
}
54% {
opacity: 0.9;
filter: blur(8px) saturate(1.08);
}
100% {
opacity: 1;
filter: blur(0) saturate(1);
transform: translateY(0) scale(1);
clip-path: inset(0 round 22px);
}
}
/* ── Command Palette — Keyboard Shortcuts sub-view ──── */
.cmd-shortcuts { padding: 4px 0 8px; }
.cmd-shortcuts-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.cmd-back-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 3px 8px;
cursor: pointer;
font-family: inherit;
transition: color 0.12s, background 0.12s;
}
.cmd-back-btn:hover { color: var(--primary); border-color: rgba(124,70,241,0.3); background: var(--primary-soft); }
.cmd-shortcuts-title {
font-size: 12px;
font-weight: 700;
color: var(--text-secondary);
}
.cmd-shortcuts-grid {
display: flex;
flex-direction: column;
gap: 1px;
padding: 0 6px 6px;
}
.cmd-shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
border-radius: var(--radius-m);
gap: 12px;
}
.cmd-shortcut-row:hover { background: var(--surface-2); }
.cmd-shortcut-keys {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.cmd-kbd-key {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-family: inherit;
color: var(--text-primary);
background: var(--surface-2);
border: 1px solid var(--border);
border-bottom-width: 2px;
border-radius: 5px;
padding: 2px 7px;
min-width: 24px;
line-height: 1.4;
}
.cmd-key-sep {
font-size: 10px;
color: var(--text-tertiary);
font-weight: 500;
}
.cmd-shortcut-desc {
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
text-align: right;
}
/* ═══════════════════════════════════════════════════════════════════
KANBAN — VIEW MODE TOGGLE
═══════════════════════════════════════════════════════════════════ */
.view-mode-toggle {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-m);
overflow: hidden;
flex-shrink: 0;
}
.vmt-btn {
padding: 7px 14px;
background: var(--surface);
color: var(--text-secondary);
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
white-space: nowrap;
}
/* Divider between the two buttons */
.vmt-btn + .vmt-btn { border-left: 1px solid var(--border); }
.vmt-btn svg { width: 14px; height: 14px; }
.vmt-btn:hover { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
.vmt-btn.active { background: var(--primary); color: #fff; }
.vmt-btn.active + .vmt-btn { border-left-color: var(--primary); }
.vmt-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* ═══════════════════════════════════════════════════════════════════
KANBAN — BOARD LAYOUT
═══════════════════════════════════════════════════════════════════ */
.kanban-section {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
.kanban-board {
display: flex;
gap: 14px;
padding: 16px 24px 24px;
overflow-x: auto;
overflow-y: hidden;
flex: 1;
align-items: flex-start;
min-height: 0;
view-transition-name: requests-surface;
}
/* ═══════════════════════════════════════════════════════════════════
KANBAN — COLUMN
═══════════════════════════════════════════════════════════════════ */
.kanban-col {
flex: 0 0 300px;
width: 300px;
min-width: 0;
max-width: 300px;
display: flex;
flex-direction: column;
max-height: 100%;
background: var(--surface-2);
border-radius: var(--radius-l);
border: 1px solid var(--border);
min-height: 120px;
transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.kanban-col.drag-over {
border-color: var(--primary);
background: rgba(124, 70, 241, 0.04);
}
.kanban-col.collapsed .kanban-col-body { display: none; }
.kanban-col-header {
padding: 11px 14px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
border-radius: var(--radius-l) var(--radius-l) 0 0;
user-select: none;
}
.kanban-col-header:hover { background: rgba(0,0,0,.03); }
body.dark .kanban-col-header:hover { background: rgba(255,255,255,.03); }
.kanban-col-title {
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-col-count {
font-size: 11px;
font-weight: 600;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 1px 8px;
color: var(--text-tertiary);
flex-shrink: 0;
}
.kanban-col-body {
flex: 1;
overflow-y: auto;
padding: 6px 10px 10px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 60px;
}
/* ═══════════════════════════════════════════════════════════════════
KANBAN — CARD
═══════════════════════════════════════════════════════════════════ */
.kanban-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-m);
padding: 11px 12px;
cursor: pointer;
transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
position: relative;
user-select: none;
}
.kanban-card--preview {
cursor: default;
}
.kanban-card:hover {
box-shadow: var(--shadow);
border-color: var(--border-strong, var(--border));
}
.kanban-card--preview:hover {
box-shadow: var(--shadow);
border-color: var(--border);
transform: none;
}
.kanban-card:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 1px;
}
.kanban-card.dragging {
opacity: .45;
transform: scale(.97);
cursor: grabbing;
}
.kanban-card--pinned { /* pin indicated by star icon in card-top row */ }
.kanban-card-top {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
margin-bottom: 7px;
}
.kanban-card-arr {
font-size: 11px;
font-weight: 700;
color: var(--text-primary);
margin-left: auto;
}
.kanban-card-customers {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 3px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kanban-card-module {
font-size: 11px;
color: var(--text-tertiary);
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.per-card-meta-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.per-card-meta-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: var(--radius-pill);
font-size: 10px;
font-weight: 700;
line-height: 1;
border: 1px solid transparent;
}
.per-card-meta-pill--feature {
text-transform: none;
}
.per-card-meta-pill--rank,
.per-card-meta-pill--violet {
background: color-mix(in srgb, var(--primary) 12%, var(--surface) 88%);
color: var(--primary);
border-color: color-mix(in srgb, var(--primary) 22%, transparent);
}
.per-card-meta-pill--teal {
background: color-mix(in srgb, var(--teal) 12%, var(--surface) 88%);
color: var(--teal);
border-color: color-mix(in srgb, var(--teal) 22%, transparent);
}
.per-card-meta-pill--amber {
background: color-mix(in srgb, var(--amber) 14%, var(--surface) 86%);
color: var(--amber);
border-color: color-mix(in srgb, var(--amber) 24%, transparent);
}
.per-card-meta-pill--green {
background: color-mix(in srgb, var(--green) 12%, var(--surface) 88%);
color: var(--green);
border-color: color-mix(in srgb, var(--green) 22%, transparent);
}
.per-card-meta-pill--blue {
background: color-mix(in srgb, var(--blue) 12%, var(--surface) 88%);
color: var(--blue);
border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}
.per-card-meta-pill--slate {
background: color-mix(in srgb, var(--text-tertiary) 12%, var(--surface) 88%);
color: var(--text-secondary);
border-color: color-mix(in srgb, var(--text-tertiary) 18%, transparent);
}
.per-card-meta-pill--mint {
background: color-mix(in srgb, #10b981 12%, var(--surface) 88%);
color: #059669;
border-color: color-mix(in srgb, #10b981 22%, transparent);
}
.kanban-card-footer {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.kanban-card-pm {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text-secondary);
flex: 1;
min-width: 0;
overflow: hidden;
}
.kanban-card-pm span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card-due {
font-size: 11px;
color: var(--text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.kanban-card-due.overdue { color: var(--red); font-weight: 600; }
.card-field-preview-slot {
display: block;
border-radius: 8px;
transition: box-shadow 180ms ease, background 180ms ease;
}
.card-field-preview-slot--inline {
display: inline-flex;
}
.card-field-preview-slot--inline[data-preview-field="arr"] {
margin-left: auto;
}
.card-field-preview-slot.is-highlighted {
background: rgba(124,70,241,0.08);
box-shadow: 0 0 0 1px rgba(124,70,241,0.18);
}
/* PER kanban card sub-elements (shared class names, no HCR equivalent) */
.kanban-card-top-row {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.kanban-badge {
display: inline-block;
font-size: 10px;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
background: var(--primary-soft);
color: var(--primary);
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card-indicators {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-top: 5px;
}
.kanban-indic {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10.5px;
color: var(--text-secondary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 5px;
white-space: nowrap;
}
.kanban-owner {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--text-secondary);
white-space: nowrap;
}
.kanban-controls {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
overflow: hidden;
max-width: 0;
opacity: 0;
transform: translateX(-10px) scale(0.985);
transform-origin: left center;
pointer-events: none;
visibility: hidden;
transition:
max-width 260ms cubic-bezier(0.16,1,0.3,1),
opacity 200ms ease,
transform 240ms cubic-bezier(0.16,1,0.3,1),
visibility 0s linear 240ms;
}
.kanban-controls--active {
max-width: 240px;
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
visibility: visible;
}
.kanban-controls--inactive {
max-width: 0;
opacity: 0;
transform: translateX(-10px) scale(0.985);
pointer-events: none;
visibility: hidden;
}
@media (max-width: 760px) {
.col-mgr--card-fields {
width: min(94vw, 720px);
}
.col-mgr--card-fields .col-mgr-body {
overflow-y: auto;
}
.card-field-config__split {
grid-template-columns: 1fr;
height: auto;
}
.card-field-config__intro,
.card-field-preview-shell__header {
flex-direction: column;
align-items: flex-start;
}
.card-field-preview-shell {
height: auto;
}
.card-field-list {
overflow: visible;
padding-right: 0;
}
.card-field-preview-board {
max-width: 100%;
}
}
/* ── Kanban column drag reorder ───────────────────── */
.kanban-col-grip {
color: var(--text-tertiary);
cursor: grab;
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0;
transition: opacity var(--t-fast) ease;
margin-right: 4px;
}
.kanban-col-header:hover .kanban-col-grip,
.per-roadmap-col-header:hover .kanban-col-grip { opacity: 1; }
.kanban-col.col-dragging { opacity: .45; }
.kanban-col.col-drag-target { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-l); }
/* ── Kanban group-by select — matches toolbar btn-outlined ─── */
.kanban-group-select {
height: 34px;
padding: 0 30px 0 12px;
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-s);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
flex-shrink: 0;
}
.kanban-group-select:hover { border-color: var(--border-strong, var(--border)); background: var(--surface-2); }
.kanban-group-select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
body.dark .kanban-group-select { background-color: var(--surface); }
/* ── Kanban sort menu active item ─────────────────── */
.tov-item--active { color: var(--primary); font-weight: 600; }
/* ── Sort arrow — clickable direction toggle in board mode ─── */
#sortArrow,
.sort-arrow {
pointer-events: auto;
border-radius: 3px;
padding: 0 2px 0 6px;
margin-left: 2px;
border-left: 1px solid var(--border);
transition: color var(--t-fast) ease;
}
#sortArrow:hover,
.sort-arrow:hover { color: var(--primary); }
/* ── Sort arrow — board mode: subtle separator before direction indicator ── */
.sort-btn--kanban .sort-arrow {
border-left: 1px solid var(--border);
padding-left: 7px;
margin-left: 4px;
color: var(--text-secondary);
transition: color var(--t-fast) ease;
}
.sort-btn--kanban .sort-arrow:hover { color: var(--primary); }
/* ── Saved Views button — active glow when a view is loaded ─── */
/* ── Saved view — force sf-wrap visible when a view is active ── */
.filter-right--saved-active .sf-wrap {
display: inline-flex !important;
align-items: center;
opacity: 1;
transform: translateX(0);
pointer-events: all;
}
/* ── Saved Views button glow when a view is loaded ─────────── */
@keyframes sv-glow {
0%, 100% { box-shadow: 0 0 0 2px rgba(124,70,241,.10); }
50% { box-shadow: 0 0 0 3px rgba(124,70,241,.24), 0 0 10px rgba(124,70,241,.12); }
}
.saved-view--active {
border-color: rgba(124,70,241,.35) !important;
animation: sv-glow 2.4s ease-in-out infinite;
position: relative;
}
/* ── Hover tooltip ──────────────────────────────────────────── */
.sv-active-tooltip {
display: flex;
align-items: center;
gap: 6px;
position: absolute;
top: calc(100% + 7px);
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-m);
box-shadow: var(--shadow);
padding: 7px 12px;
font-size: 12px;
color: var(--text-primary);
z-index: 500;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity var(--t-fast) ease, visibility var(--t-fast) ease;
}
.saved-view--active:hover .sv-active-tooltip {
visibility: visible;
opacity: 1;
}
.sv-active-tooltip-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text-tertiary);
}
.sv-active-tooltip strong { font-weight: 700; color: var(--primary); }
.sv-active-tooltip-mode {
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 20px;
background: rgba(124,70,241,.1);
color: var(--primary);
}
.sf-exit-btn {
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: var(--radius-s);
border: 1px solid rgba(124,70,241,.25);
background: var(--surface);
color: var(--primary);
cursor: pointer;
transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.sf-exit-btn:hover { background: rgba(124,70,241,.1); border-color: rgba(124,70,241,.4); }
.sf-item--active {
background: rgba(124,70,241,.07);
border-color: rgba(124,70,241,.16);
}
.sf-item--active .sf-apply { font-weight: 600; color: var(--primary); }
body.dark .sf-item--active {
background: rgba(124,70,241,.12);
border-color: rgba(124,70,241,.22);
}
/* ── Kanban card module badge ────────────────── */
.badge--module { background: rgba(8,145,178,.1); color: var(--teal); }
body.dark .badge--module { background: rgba(8,145,178,.18); }
/* ── Card field section headers in Card Fields modal ── */
.card-field-section-header {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-tertiary);
padding: 10px 14px 4px;
list-style: none;
pointer-events: none;
}
.card-field-section-header:first-child { padding-top: 6px; }
/* ── Kanban body date urgency ─────────────────── */
.kanban-date--overdue { color: var(--red) !important; font-weight: 600; }
.kanban-date--warn { color: var(--amber) !important; font-weight: 600; }
/* ── Card field drag animation ───────────────── */
.card-field-item { cursor: grab; transition: opacity var(--t-fast) ease, background var(--t-fast) ease; }
.card-field-item.dragging { opacity: 0.35; cursor: grabbing; }
.card-field-item.drag-over { box-shadow: 0 -2px 0 0 var(--primary); background: rgba(124,70,241,.04); }
.card-field-item.drag-above { box-shadow: 0 -2px 0 0 var(--primary); }
.card-field-item.drag-below { box-shadow: 0 2px 0 0 var(--primary); }
.card-field-item--no-drag { cursor: default; }
.card-field-item--no-drag .col-item-grip { display: none; }
/* ═══════════════════════════════════════════════════════
CUSTOMER TYPEAHEAD — Add Request form
═══════════════════════════════════════════════════════ */
.ct-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chips.hidden { display: none; }
.ct-chip {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(124,70,241,.09); border: 1px solid rgba(124,70,241,.25);
border-radius: var(--radius-pill); padding: 3px 8px;
font-size: 12px; color: var(--primary);
}
.ct-chip-arr { font-size: 10px; font-weight: 700; opacity: .75; }
.ct-chip-x {
background: none; border: none; cursor: pointer; padding: 0 2px;
font-size: 14px; line-height: 1; color: var(--primary); opacity: .6;
}
.ct-chip-x:hover { opacity: 1; }
.ct-search { width: 100%; }
.ct-dropdown {
position: absolute; top: 100%; left: 0; right: 0; z-index: 400;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-m); box-shadow: var(--shadow);
max-height: 260px; overflow-y: auto; margin-top: 2px;
}
.ct-item {
display: flex; flex-direction: column; gap: 2px;
width: 100%; text-align: left; padding: 9px 12px;
background: none; border: none; cursor: pointer;
border-bottom: 1px solid var(--border); transition: background var(--t-fast) ease;
}
.ct-item:last-child { border-bottom: none; }
.ct-item:hover { background: var(--primary-soft); }
.ct-item-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ct-item-meta { font-size: 11px; color: var(--text-tertiary); }
.ct-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--text-tertiary); }
/* ── Auto-populated field indicator ─────────────────── */
.field-auto-badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--primary);
background: rgba(124,70,241,.08);
border: 1px solid rgba(124,70,241,.18);
border-radius: 999px;
padding: 2px 8px;
line-height: 1.2;
white-space: nowrap;
margin-left: auto;
}
.field-auto-locked {
opacity: 0.72;
cursor: not-allowed;
background: var(--surface-2) !important;
/* Disabled inputs swallow cursor styling — drop pointer-events so hover falls
through to the parent .form-field, which carries the block cursor */
pointer-events: none;
}
/* Block-input cursor on hover over the locked field region (incl. disabled date inputs) */
.form-field:has(> .field-auto-locked) { cursor: not-allowed; }
/* Rollback: customer-greened confetti (Customer Health inline edit celebration) */
.pulse-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.pulse-confetti-piece {
position: fixed; top: 0; left: 0;
width: 9px; height: 14px;
border-radius: 2px;
will-change: transform, opacity;
}
/* ═══════════════════════════════════════════════════════
ELIGIBILITY GATING — Add Request form
═══════════════════════════════════════════════════════ */
/* Framework qualification checkboxes */
.elig-qual {
margin: 12px 0 0;
padding: 14px 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-m);
}
.elig-qual-header {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--text-tertiary);
margin-bottom: 10px;
}
.elig-check-row {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 5px 0;
cursor: pointer;
user-select: none;
}
.elig-checkbox {
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--primary);
width: 14px;
height: 14px;
cursor: pointer;
}
.elig-check-label {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.45;
}
.elig-check-row:hover .elig-check-label { color: var(--text-primary); }
.elig-mini-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
margin: 8px 0;
}
.elig-mini-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.elig-mini-label {
font-size: 11px;
font-weight: 650;
color: var(--text-tertiary);
}
.elig-context {
margin: 8px 0 4px;
}
.elig-exclusions {
margin: 8px 0 4px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-s);
background: var(--surface-1);
}
.elig-load-note {
margin: 8px 0 2px;
padding: 8px 10px;
border: 1px solid rgba(217,119,6,.28);
border-radius: var(--radius-s);
background: rgba(217,119,6,.07);
color: var(--text-secondary);
font-size: 12px;
line-height: 1.45;
}
.elig-load-note strong {
color: var(--text-primary);
}
@media (max-width: 720px) {
.elig-mini-grid { grid-template-columns: 1fr; }
}
/* Eligibility status bar */
.elig-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
margin: 10px 0 0;
border-radius: var(--radius-m);
border: 1px solid var(--border);
background: var(--surface-2);
font-size: 13px;
font-weight: 600;
transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.elig-bar--pass { background: rgba(22,163,74,.07); border-color: rgba(22,163,74,.3); color: var(--green); }
.elig-bar--fail { background: rgba(217,119,6,.07); border-color: rgba(217,119,6,.3); color: var(--amber); }
.elig-bar-inner { flex: 1; display: flex; align-items: center; gap: 7px; }
.elig-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.elig-dot--pass { background: var(--green); }
.elig-dot--fail { background: var(--amber); }
.elig-bar-toggle {
background: none; border: none; cursor: pointer; padding: 2px;
color: inherit; opacity: .7; transition: transform var(--t-fast) ease;
}
.elig-bar-toggle--open { transform: rotate(180deg); }
/* Eligibility details (expanded) */
.elig-details {
padding: 8px 16px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius-m) var(--radius-m);
margin-top: -1px;
}
.elig-row {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
font-size: 12.5px;
border-bottom: 1px solid var(--border);
}
.elig-row:last-child { border-bottom: none; }
.elig-row--pass .elig-icon { color: var(--green); margin-top: 1px; flex-shrink: 0; }
.elig-row--fail .elig-icon { color: var(--amber); margin-top: 1px; flex-shrink: 0; }
.elig-rule-name { font-weight: 600; color: var(--text-primary); display: block; }
.elig-rule-msg { color: var(--text-tertiary); font-size: 11.5px; margin-top: 1px; display: block; }
/* Exception Review button */
.btn-review {
color: var(--amber) !important;
border-color: rgba(217,119,6,.35) !important;
gap: 6px;
}
.btn-review:hover { background: rgba(217,119,6,.07) !important; border-color: rgba(217,119,6,.6) !important; }
/* ── Exception Review Queue ─────────────────── */
.rq-pending-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; border-radius: 20px;
background: var(--amber); color: #fff;
font-size: 10px; font-weight: 700; padding: 0 5px; margin-left: 6px;
}
.rq-item {
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.rq-item:last-child { border-bottom: none; }
.rq-item-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.rq-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rq-customer { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.rq-detail { font-size: 12px; color: var(--text-tertiary); }
.rq-time { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; }
.rq-fails { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.rq-fail-tag {
font-size: 11px; font-weight: 600; padding: 2px 8px;
border-radius: 20px; background: rgba(217,119,6,.1); color: var(--amber);
}
.rq-escalation {
font-size: 12px; color: var(--text-secondary); font-style: italic;
background: var(--surface-2); padding: 7px 10px; border-radius: var(--radius-s);
margin-bottom: 8px; line-height: 1.5;
}
.rq-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rq-reject-wrap { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 200px; }
.rq-reject-reason { flex: 1; }
.rq-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .05em; }
.rq-status--pending { background: rgba(217,119,6,.1); color: var(--amber); }
.rq-status--approved { background: rgba(22,163,74,.1); color: var(--green); }
.rq-status--rejected { background: rgba(220,38,38,.1); color: var(--red); }
/* ── Review Detail Panel — design language aligned ── */
.rq-detail-panel { width: 480px; }
.rqd-panel-body {
flex: 1; overflow-y: auto; padding: 0;
scrollbar-width: thin;
}
.rqd-criteria-block {
padding: 14px 20px 12px;
background: rgba(217,119,6,.06);
border-bottom: 1px solid rgba(217,119,6,.18);
}
.rqd-criteria-row {
display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px;
}
.rqd-criteria-row:last-child { margin-bottom: 0; }
.rqd-criteria-icon { color: var(--amber); margin-top: 2px; flex-shrink: 0; }
.rqd-criteria-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: block; }
.rqd-criteria-msg { font-size: 11.5px; color: var(--text-tertiary); display: block; margin-top: 1px; }
.rqd-section-label {
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--text-tertiary);
margin: 14px 0 8px;
}
.rqd-body { padding: 2px 20px 16px; }
.rqd-escalation {
font-size: 13px; color: var(--text-secondary); line-height: 1.65;
white-space: pre-wrap; background: var(--surface-2);
padding: 10px 12px; border-radius: var(--radius-m); margin-bottom: 4px;
}
.dm-cell--full { grid-column: 1 / -1; }
/* ── Review Queue page filter tabs ─────────────── */
.rq-filter-tabs { display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-m); padding: 3px; }
.rq-tab {
padding: 5px 12px; font-size: 12px; font-weight: 500; border: none; cursor: pointer;
border-radius: var(--radius-s); background: transparent; color: var(--text-secondary);
transition: background var(--t-fast) ease, color var(--t-fast) ease;
display: inline-flex; align-items: center; gap: 5px;
}
.rq-tab:hover { color: var(--text-primary); }
.rq-tab.active { background: var(--surface); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.rq-tab-count {
font-size: 10px; font-weight: 700; background: var(--amber); color: #fff;
border-radius: 20px; padding: 0 5px; min-width: 16px; text-align: center;
}
/* ── RQ Detail Panel — native design system ──────── */
.rqd-panel-submeta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
padding: 8px 16px; border-bottom: 1px solid var(--border);
background: var(--surface-2); flex-shrink: 0;
}
.rqd-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-tertiary); }
.rqd-meta-item svg { opacity: .6; }
.rqd-meta-sep { font-size: 11px; color: var(--border-strong, var(--border)); }
.rqd-panel-footer {
display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap;
padding: 14px 16px; border-top: 1px solid var(--border);
background: var(--surface);
}
.rqd-reject-row { display: flex; gap: 6px; flex: 1; min-width: 150px; }
.rqd-reject-row .form-input { height: 34px; font-size: 12px; padding: 0 10px; }
.rqd-reviewed-state { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 12.5px; font-weight: 600; padding: 4px 0; width: 100%; }
.rqd-reviewed-state--approved { color: var(--green); }
.rqd-reviewed-state--rejected { color: var(--red); }
.rqd-reviewer { font-weight: 400; color: var(--text-tertiary); font-size: 11.5px; margin-left: auto; }
.dm-cell-value--strong { font-weight: 700; font-size: 13.5px; }
.rqd-link { color: var(--primary); word-break: break-all; }
.rqd-link:hover { text-decoration: underline; }
/* ── Row flash highlight ─────────────────────────────────────────────────── */
@keyframes row-flash-pulse {
0% { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.20); }
38% { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.04); }
62% { box-shadow: inset 0 0 0 9999px rgba(124,70,241,.16); }
100% { box-shadow: inset 0 0 0 9999px transparent; }
}
.table-row.row-flash td {
animation: row-flash-pulse 2s cubic-bezier(0.16,1,0.3,1) forwards !important;
}
/* ═══════════════════════════════════════════════════════
ADMIN CONFIGURATION CENTER
═══════════════════════════════════════════════════════ */
.ac-layout {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.ac-sidebar {
width: 220px;
flex-shrink: 0;
border-right: 1px solid var(--border);
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 2px;
overflow-y: auto;
}
.ac-nav-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
padding: 8px 12px;
border: none;
border-radius: var(--radius-m);
background: none;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.ac-nav-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.ac-nav-btn.active { background: rgba(124,70,241,.1); color: var(--primary); font-weight: 600; }
.ac-nav-btn.dirty { font-style: italic; }
.ac-dirty-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
.ac-content {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.ac-section-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 24px 28px 16px;
border-bottom: 1px solid var(--border);
}
.ac-section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ac-section-desc { font-size: 13px; color: var(--text-tertiary); }
.ac-editor { padding: 20px 28px; }
.ac-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
border-top: 1px solid var(--border);
background: var(--surface-2);
flex-shrink: 0;
}
.ac-footer-meta { font-size: 12px; color: var(--text-tertiary); }
/* Table */
.ac-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ac-th { padding: 8px 12px; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); border-bottom: 1px solid var(--border); }
.ac-td { padding: 8px 6px; border-bottom: 1px solid var(--border); }
.ac-td--action { width: 40px; }
.ac-table-row:last-child .ac-td { border-bottom: none; }
.ac-table-row:hover { background: var(--surface-2); }
.ac-row-key { font-weight: 600; font-size: 13px; padding: 0 6px; }
.ac-table .form-input { height: 32px; font-size: 12px; padding: 0 10px; }
/* Tag list */
.ac-tag-area { display: flex; flex-wrap: wrap; gap: 6px; min-height: 36px; padding: 6px 0; }
.ac-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 3px 10px;
font-size: 12px; font-weight: 500; color: var(--text-primary);
}
.ac-chip-x { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 14px; color: var(--text-tertiary); line-height: 1; }
.ac-chip-x:hover { color: var(--red); }
.ac-field-group { display: flex; flex-direction: column; gap: 6px; }
.ac-field-group-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 2px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
/* Risk Indicator admin form */
.ac-risk-layout { display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: start; }
.ac-risk-form { display: flex; flex-direction: column; }
.ac-risk-preview { position: sticky; top: 20px; padding: 16px; background: var(--surface-2); border-radius: var(--radius-md); border: 1px solid var(--border); }
.ac-risk-sig-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; gap: 8px; font-size: 12.5px; color: var(--text-primary); }
.ac-risk-sig-label{ flex: 1; }
.ac-risk-bracket-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.ac-risk-num { padding: 3px 6px !important; height: 28px !important; font-size: 12px !important; }
@media (max-width: 860px) { .ac-risk-layout { grid-template-columns: 1fr; } .ac-risk-preview { position: static; } }
.ac-fw-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.ac-fw-tab {
padding: 7px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
}
.ac-fw-tab.active {
background: rgba(124,70,241,.1);
border-color: rgba(124,70,241,.3);
color: var(--primary);
}
.ac-fw-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ac-fw-stack { display: flex; flex-direction: column; gap: 16px; }
.ac-fw-card {
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
padding: 16px;
box-shadow: var(--shadow-sm);
}
.ac-fw-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.ac-fw-stat-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ac-fw-stat-label {
font-size: 11px;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.ac-fw-stat-value {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.ac-fw-stat-value--mono {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
}
.ac-fw-badge-row,
.ac-fw-header-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ac-fw-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-secondary);
font-size: 11px;
font-weight: 700;
}
.ac-fw-badge.is-good {
background: rgba(22,163,74,.1);
border-color: rgba(22,163,74,.25);
color: var(--green);
}
.ac-fw-badge.is-warn {
background: rgba(217,119,6,.1);
border-color: rgba(217,119,6,.25);
color: var(--amber);
}
.ac-fw-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ac-fw-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ac-fw-field .form-input,
.ac-fw-field .form-select { width: 100%; }
.ac-fw-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: 8px;
}
.ac-fw-add-btn {
margin-top: 12px;
font-size: 12px;
}
.ac-fw-row-btn,
.ac-fw-version-btn { font-size: 12px; }
.ac-fw-region-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ac-fw-region-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
background: var(--surface-2);
}
.ac-fw-region-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 10px;
}
.ac-fw-validation {
margin-bottom: 14px;
padding: 10px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
}
.ac-fw-validation.is-valid {
background: rgba(22,163,74,.08);
border: 1px solid rgba(22,163,74,.2);
color: var(--green);
}
.ac-fw-validation.is-invalid {
background: rgba(220,38,38,.08);
border: 1px solid rgba(220,38,38,.2);
color: var(--red);
}
.ac-fw-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.ac-fw-list-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.ac-fw-list-item:last-child { border-bottom: none; }
.ac-fw-list-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.ac-fw-list-sub,
.ac-fw-list-note,
.ac-fw-preview-meta {
font-size: 11.5px;
color: var(--text-tertiary);
}
.ac-fw-preview-state {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 1120px) {
.ac-fw-grid,
.ac-fw-region-grid,
.ac-fw-field-grid,
.ac-fw-stat-row {
grid-template-columns: 1fr;
}
}
/* ── Customer chip — country tag ─────────────────── */
.ct-chip-country {
font-size: 10px; font-weight: 600; padding: 1px 6px;
border-radius: 20px; background: var(--surface-2);
color: var(--text-tertiary); border: 1px solid var(--border);
flex-shrink: 0;
}
/* ── PER Stack Rank ─────────────────────────────────────────────── */
.per-sr-table { width: max-content; min-width: 100%; }
.per-sr-table col.per-sr-col--handle { width: 20px; }
.per-sr-table col.per-sr-col--rank { width: 72px; }
.per-sr-table col.per-sr-col--customer { width: 220px; }
.per-sr-table col.per-sr-col--problem { width: 320px; }
.per-sr-table col.per-sr-col--score-param { width: 44px; }
.per-sr-table col.per-sr-col--score { width: 112px; }
.per-sr-table col.per-sr-col--status { width: 96px; }
.per-sr-table col.per-sr-col--pm-note { width: 132px; }
.per-sr-table col.per-sr-col--actions { width: 60px; }
.per-sr-table thead th {
white-space: nowrap;
vertical-align: top;
}
.per-sr-table th,
.per-sr-table td {
box-sizing: border-box;
}
.per-sr-score-cell {
position: relative;
border-radius: var(--radius-xs);
transition: filter var(--t-fast) ease, box-shadow var(--t-fast) ease, background var(--t-fast) ease;
}
.per-sr-score-cell:hover {
background: color-mix(in srgb, var(--primary) 9%, transparent);
box-shadow: inset 0 0 0 1px rgba(124,70,241,0.22), 0 0 0 2px rgba(124,70,241,0.14);
}
.per-sr-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.per-sr-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-radius: var(--radius-m);
background: var(--surface); border: 1px solid var(--border);
transition: box-shadow .15s, background .15s;
cursor: default;
}
.per-sr-row:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
.per-sr-row.drag-over { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.per-sr-row.dragging { opacity: .45; }
.per-sr-handle { font-size: 16px; color: var(--text-tertiary); cursor: grab; padding: 0 4px; user-select: none; }
.per-sr-rank { min-width: 28px; font-size: 11px; font-weight: 800; color: var(--text-tertiary); text-align: center; }
.per-sr-rank--set { color: var(--primary); }
.per-sr-problem { flex: 1; font-size: 12px; color: var(--text-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.per-sr-table .per-sr-problem {
display: block;
max-width: 100%;
}
.per-sr-pm-note-cell {
font-size: 12px;
color: var(--text-secondary);
}
.per-sr-pm-note-cell--filled {
text-align: left;
}
.per-sr-pm-note-cell--empty {
text-align: center;
}
.per-sr-pm-note-empty-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 18px;
}
.per-sr-pm-note-shell {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
min-width: 0;
}
.per-sr-pm-note-text {
display: inline-block;
min-width: 0;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.per-sr-pm-note-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 12%, var(--surface));
color: var(--primary);
font-size: 11px;
font-weight: 800;
line-height: 1;
vertical-align: middle;
}
.per-sr-pm-note-empty {
color: var(--text-tertiary);
}
.per-sr-pm-note-icon {
width: 18px;
height: 18px;
font-size: 11px;
opacity: 0.78;
flex-shrink: 0;
}
.per-sr-pm-note-cell--editable:hover .per-sr-pm-note-add {
background: color-mix(in srgb, var(--primary) 16%, var(--surface));
}
.per-sr-pm-note-cell--editable:hover .per-sr-pm-note-icon {
opacity: 1;
}
.per-sr-act-col {
width: 60px;
font-size: 0;
}
.per-sr-act-col .per-sr-act-btn {
width: 26px;
height: 26px;
}
.per-sr-act-col .per-sr-act-btn svg {
width: 13px;
height: 13px;
}
.per-sr-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.per-sr-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); }
.per-sr-pm-note { font-size: 10px; color: var(--teal); cursor: pointer; max-width: 140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.per-sr-note-btn { opacity: 0; transition: opacity .15s; background: none; border: none; cursor: pointer; color: var(--text-tertiary); font-size: 13px; padding: 2px 4px; }
.per-sr-row:hover .per-sr-note-btn { opacity: 1; }
.per-sr-note-input { font-size: 12px; border: 1px solid var(--primary); border-radius: 4px; padding: 3px 8px; background: var(--surface); color: var(--text-primary); width: 200px; }
/* ── PER Roadmap ─────────────────────────────────────────────────── */
/* ── PER Roadmap Board ──────────────────────────── */
.per-roadmap-kpi-row {
margin-bottom: 16px;
padding: 0;
}
.per-roadmap-kpi-row .tl-kpi-card {
appearance: none;
text-align: left;
font: inherit;
}
/* ── Roadmap toolbar ── */
.rm-toolbar {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 12px;
margin-bottom: 4px;
}
.rm-toolbar__row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.rm-toolbar__left {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
overflow: visible;
}
.rm-toolbar__right {
display: flex;
align-items: center;
flex-shrink: 0;
margin-left: 8px;
}
.rm-sep {
display: block;
width: 1px;
height: 16px;
background: var(--border);
flex-shrink: 0;
margin: 0 2px;
border-radius: 1px;
}
.rm-module-picker {
position: relative;
flex-shrink: 0;
}
.rm-module-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 0 10px;
font-size: 12px;
height: 28px;
max-width: 160px;
white-space: nowrap;
}
.rm-module-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 1;
}
.per-roadmap-module-menu {
transform-origin: top left;
right: auto;
left: 0;
min-width: 200px;
}
.rm-search-wrap {
display: flex;
align-items: center;
flex-shrink: 0;
}
.rm-search-wrap .search-bar--open .search-input-wrap {
max-width: 200px;
}
.rm-collapse-btn {
display: flex;
align-items: center;
gap: 5px;
height: 28px;
padding: 0 10px;
font-size: 12px;
flex-shrink: 0;
white-space: nowrap;
}
.rm-planned-toggle {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
user-select: none;
}
.rm-planned-toggle input { margin: 0; cursor: pointer; }
.rm-undated-badge {
font-size: 11px;
color: var(--text-tertiary);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 99px;
padding: 2px 8px;
white-space: nowrap;
flex-shrink: 0;
}
.per-roadmap-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
flex-basis: 100%;
margin-top: -2px;
}
.per-roadmap-board-shell {
min-width: 0;
min-height: 0;
flex: 1;
}
.per-roadmap-gantt-surface {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
.per-roadmap-board {
display: flex;
gap: 14px;
padding: 4px 0 24px;
overflow-x: auto;
align-items: flex-start;
min-height: 0;
flex: 1;
}
.per-roadmap-board--comfortable { gap: 16px; }
.per-roadmap-board--comfortable .per-roadmap-col { flex-basis: 304px; }
.per-roadmap-board--comfortable .per-roadmap-card { padding: 12px 13px 11px; margin-bottom: 9px; }
.per-roadmap-board--comfortable .prc-title { font-size: 12.5px; margin-bottom: 9px; }
.per-roadmap-board--comfortable .prc-customers { margin-bottom: 9px; }
.per-roadmap-board--default { gap: 14px; }
.per-roadmap-board--default .per-roadmap-col { flex-basis: 288px; }
.per-roadmap-board--default .per-roadmap-card { padding: 10px 11px 9px; margin-bottom: 7px; }
.per-roadmap-col {
flex: 0 0 288px;
background: var(--surface-2);
border: 1px solid var(--border);
border-top: 3px solid var(--per-col-color, var(--border));
border-radius: var(--radius-l);
display: flex;
flex-direction: column;
max-height: calc(100vh - 320px);
min-height: 200px;
overflow: hidden;
transition: max-height var(--t) var(--ease), flex-basis var(--t-fast), min-height var(--t-fast);
}
.per-roadmap-col.col-dragging { opacity: .45; }
.per-roadmap-col.col-drag-target { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-l); }
.per-roadmap-col--collapsed {
max-height: none !important;
flex-basis: 128px;
min-height: 0;
}
.per-roadmap-col--empty {
min-height: 0;
}
.per-roadmap-col--empty .per-roadmap-col-body {
display: none;
}
.per-roadmap-col--compact .per-roadmap-col-header,
.per-roadmap-col--empty .per-roadmap-col-header,
.per-roadmap-col--collapsed .per-roadmap-col-header {
height: 100%;
padding: 14px 10px 12px;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.per-roadmap-col--compact .per-roadmap-col-header-left,
.per-roadmap-col--compact .per-roadmap-col-header-right,
.per-roadmap-col--empty .per-roadmap-col-header-left,
.per-roadmap-col--empty .per-roadmap-col-header-right,
.per-roadmap-col--collapsed .per-roadmap-col-header-left,
.per-roadmap-col--collapsed .per-roadmap-col-header-right {
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 100%;
}
.per-roadmap-col--compact .per-roadmap-col-label,
.per-roadmap-col--empty .per-roadmap-col-label,
.per-roadmap-col--collapsed .per-roadmap-col-label {
writing-mode: initial;
transform: none;
text-align: left;
letter-spacing: .07em;
line-height: 1.15;
white-space: normal;
}
.per-roadmap-col--compact .per-roadmap-col-arr,
.per-roadmap-col--empty .per-roadmap-col-arr,
.per-roadmap-col--collapsed .per-roadmap-col-arr {
display: none;
}
.per-roadmap-col--compact .per-roadmap-col-count,
.per-roadmap-col--empty .per-roadmap-col-count,
.per-roadmap-col--collapsed .per-roadmap-col-count {
padding: 2px 6px;
}
.per-roadmap-col--compact .per-roadmap-col-chevron,
.per-roadmap-col--empty .per-roadmap-col-chevron,
.per-roadmap-col--collapsed .per-roadmap-col-chevron {
align-self: flex-start;
}
.per-roadmap-col-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px 9px;
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-shrink: 0;
border-radius: 0;
cursor: pointer;
user-select: none;
transition: background var(--t-fast);
}
.per-roadmap-col-header[draggable="true"] { cursor: grab; }
.per-roadmap-col-header[draggable="true"]:active { cursor: grabbing; }
.per-roadmap-col--empty .per-roadmap-col-header {
cursor: default;
border-bottom: none;
}
.per-roadmap-col-header:hover { background: var(--surface-2); }
.per-roadmap-col-header-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.per-roadmap-col-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.per-roadmap-col-dot { display: none; }
.per-roadmap-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--per-col-color, var(--text-primary)); }
.per-roadmap-col-count { font-size: 10px; font-weight: 700; color: var(--text-tertiary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 1px 7px; }
.per-roadmap-col-arr { font-size: 10px; color: var(--text-tertiary); font-family: monospace; white-space: nowrap; }
.per-roadmap-col-chevron { font-size: 11px; color: var(--text-tertiary); transition: transform var(--t-fast); line-height: 1; }
.per-roadmap-col--collapsed .per-roadmap-col-chevron { transform: rotate(-90deg); }
.per-roadmap-col--collapsed .per-roadmap-col-body { display: none; }
.per-roadmap-col-body {
flex: 1;
overflow-y: auto;
padding: 8px 10px 12px;
display: flex;
flex-direction: column;
gap: 0;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
min-height: 60px;
}
.per-roadmap-col-body::-webkit-scrollbar { width: 4px; }
.per-roadmap-col-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.per-roadmap-shipped-group { margin-top: 6px; }
.per-roadmap-shipped-summary {
font-size: 11px;
color: var(--green);
cursor: pointer;
list-style: none;
padding: 4px 0;
display: flex;
align-items: center;
gap: 4px;
user-select: none;
}
.per-roadmap-shipped-summary::marker,
.per-roadmap-shipped-summary::-webkit-details-marker { display: none; }
.per-roadmap-shipped-list { margin-top: 4px; }
/* ── Not Moving Forward (terminal) ── */
.per-roadmap-col--terminal {
background: linear-gradient(180deg, rgba(220,38,38,0.06) 0%, transparent 44%), var(--surface-2);
border-color: rgba(220, 38, 38, 0.28);
}
.per-roadmap-col--terminal .per-roadmap-col-header {
background: rgba(254, 226, 226, 0.55);
border-bottom-color: rgba(220, 38, 38, 0.2);
}
.per-roadmap-col--terminal .per-roadmap-col-count {
color: var(--red);
border-color: rgba(220, 38, 38, 0.18);
}
body.dark .per-roadmap-col--terminal {
background:
linear-gradient(180deg, rgba(34,24,30,0.96), rgba(28,22,27,0.94)),
linear-gradient(145deg, rgba(220,38,38,0.1), rgba(0,0,0,0));
border-color: rgba(248, 113, 113, 0.32);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-header {
background: rgba(43, 28, 34, 0.92);
border-bottom-color: rgba(248, 113, 113, 0.22);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-label {
color: rgba(255, 235, 235, 0.92);
}
body.dark .per-roadmap-col--terminal .per-roadmap-col-count {
background: rgba(127, 29, 29, 0.3);
color: #fda4af;
border-color: rgba(248, 113, 113, 0.28);
}
/* ── Unplanned / TBD (amber) ── */
.per-roadmap-col--unplanned {
background: linear-gradient(180deg, rgba(245,158,11,0.06) 0%, transparent 44%), var(--surface-2);
border-color: rgba(245, 158, 11, 0.32);
}
.per-roadmap-col--unplanned .per-roadmap-col-header {
background: rgba(255, 251, 235, 0.7);
border-bottom-color: rgba(245, 158, 11, 0.2);
}
.per-roadmap-col--unplanned .per-roadmap-col-count {
color: #D97706;
border-color: rgba(245, 158, 11, 0.22);
}
body.dark .per-roadmap-col--unplanned {
background: linear-gradient(180deg, rgba(245,158,11,0.09) 0%, transparent 44%), var(--surface-2);
border-color: rgba(251, 191, 36, 0.28);
}
body.dark .per-roadmap-col--unplanned .per-roadmap-col-header {
background: rgba(78, 52, 6, 0.45);
border-bottom-color: rgba(251, 191, 36, 0.18);
}
body.dark .per-roadmap-col--unplanned .per-roadmap-col-count {
background: rgba(78, 52, 6, 0.3);
color: #FCD34D;
border-color: rgba(251, 191, 36, 0.25);
}
/* ── Beyond (slate) ── */
.per-roadmap-col--beyond {
background: linear-gradient(180deg, rgba(100,116,139,0.05) 0%, transparent 44%), var(--surface-2);
border-color: rgba(100, 116, 139, 0.28);
}
.per-roadmap-col--beyond .per-roadmap-col-header {
background: rgba(241, 245, 249, 0.8);
border-bottom-color: rgba(100, 116, 139, 0.16);
}
.per-roadmap-col--beyond .per-roadmap-col-count {
color: #64748B;
border-color: rgba(100, 116, 139, 0.2);
}
body.dark .per-roadmap-col--beyond {
background: linear-gradient(180deg, rgba(100,116,139,0.1) 0%, transparent 44%), var(--surface-2);
border-color: rgba(148, 163, 184, 0.24);
}
body.dark .per-roadmap-col--beyond .per-roadmap-col-header {
background: rgba(30, 41, 59, 0.5);
border-bottom-color: rgba(148, 163, 184, 0.15);
}
body.dark .per-roadmap-col--beyond .per-roadmap-col-count {
color: #94A3B8;
border-color: rgba(148, 163, 184, 0.2);
}
/* ── Column note (terminal / beyond / unplanned) ── */
.per-roadmap-col-note {
font-size: 11px; line-height: 1.5;
margin: 0 0 10px; padding: 6px 8px;
border-radius: 6px;
}
.per-roadmap-col-note--terminal {
background: rgba(220,38,38,0.06); color: #B91C1C;
border: 1px solid rgba(220,38,38,0.14);
}
.per-roadmap-col-note--unplanned {
background: rgba(245,158,11,0.07); color: #92400E;
border: 1px solid rgba(245,158,11,0.18);
}
.per-roadmap-col-note--beyond {
background: rgba(100,116,139,0.06); color: #475569;
border: 1px solid rgba(100,116,139,0.16);
}
body.dark .per-roadmap-col-note--terminal { background: rgba(220,38,38,0.12); color: #FCA5A5; border-color: rgba(248,113,113,0.2); }
body.dark .per-roadmap-col-note--unplanned { background: rgba(245,158,11,0.1); color: #FCD34D; border-color: rgba(251,191,36,0.2); }
body.dark .per-roadmap-col-note--beyond { background: rgba(100,116,139,0.1); color: #94A3B8; border-color: rgba(148,163,184,0.18); }
/* ── Board Cards (prc-* structure) ── */
.per-roadmap-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 9px;
padding: 10px 11px 9px;
margin-bottom: 7px;
cursor: pointer;
transition: box-shadow .15s, transform .1s, border-color .12s;
}
.per-roadmap-card:hover {
box-shadow: 0 3px 10px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
transform: translateY(-1px);
border-color: var(--border-strong);
}
.per-roadmap-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.per-roadmap-card--muted { opacity: .5; }
.prc-header {
display: flex; align-items: center; justify-content: space-between;
gap: 6px; margin-bottom: 7px; min-height: 20px;
}
.prc-status {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; line-height: 1;
padding: 3px 8px 3px 5px; border-radius: 99px;
background: color-mix(in srgb, var(--prc-color) 12%, transparent);
color: var(--prc-color);
max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prc-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--prc-color); flex-shrink: 0;
}
.prc-rank {
font-size: 10px; font-weight: 700; color: var(--text-tertiary);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 5px; padding: 1px 6px; line-height: 1.4; flex-shrink: 0;
}
.prc-title {
font-size: 12px; font-weight: 500; color: var(--text-primary);
line-height: 1.5; margin-bottom: 7px;
display: -webkit-box; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; overflow: hidden;
}
.prc-customers {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px; margin-bottom: 8px;
}
.prc-extra { font-size: 10px; color: var(--text-tertiary); font-weight: 500; }
.prc-footer {
display: flex; align-items: center;
justify-content: space-between; gap: 4px;
}
.prc-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.prc-tag {
font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px;
background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border);
white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}
.prc-tag--ft { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.prc-arr {
font-size: 10px; font-weight: 700; font-family: monospace;
color: var(--text-secondary); white-space: nowrap; flex-shrink: 0;
}
/* Compact density */
.per-roadmap-board--compact { gap: 12px; }
.per-roadmap-board--compact .per-roadmap-col { flex-basis: 264px; }
.per-roadmap-board--compact .per-roadmap-card { padding: 7px 10px 6px; margin-bottom: 5px; }
.per-roadmap-board--compact .prc-header { margin-bottom: 5px; }
.per-roadmap-board--compact .prc-title { font-size: 11px; -webkit-line-clamp: 1; margin-bottom: 5px; }
.per-roadmap-board--compact .prc-customers { margin-bottom: 5px; }
/* Empty column state */
.per-roadmap-empty {
font-size: 11px; color: var(--text-tertiary); text-align: center;
padding: 20px 8px; font-style: italic; border: 1px dashed var(--border);
border-radius: var(--radius-m); margin: 4px 0;
}
/* PER My Requests */
.per-my-req-toolbar { } /* spacing comes from shared .filter-row padding (0 24px 8px) for parity with All Requests */
.per-my-req-empty { text-align: center; padding: 60px 24px; }
.per-my-req-empty-icon { color: var(--border-strong); margin-bottom: 12px; }
.per-my-req-empty-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
.per-my-req-empty-sub { font-size: 13px; color: var(--text-tertiary); margin: 0; }
.per-my-req-problem-cell { width: 26%; min-width: 0; white-space: normal !important; }
.per-my-req-problem {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
overflow-wrap: anywhere;
line-height: 1.35;
}
@media (max-width: 900px) {
.per-roadmap-toolbar__right {
margin-left: 0;
}
.per-roadmap-toolbar__subrow {
align-items: flex-start;
flex-direction: column;
}
.per-roadmap-toolbar__subrow-right {
margin-left: 0;
}
.per-roadmap-toolbar__field,
.per-roadmap-toolbar__search-wrap,
.per-roadmap-toolbar__right,
.per-roadmap-toolbar__subrow-left,
.per-roadmap-toolbar__subrow-right {
flex: 1 1 100%;
}
.per-roadmap-toolbar__search-wrap .search-bar--open .search-input-wrap {
max-width: 100%;
}
.per-roadmap-col--collapsed {
flex-basis: 118px;
}
}
/* Gantt view needs overflow:hidden on outer container */
#view-per-roadmap { overflow: hidden; }
#perRoadmapContainer { display: flex; flex-direction: column; }
/* ═══════════════════════════════════════════════
Account Pulse
═══════════════════════════════════════════════ */
.pulse-page {
display: flex; flex-direction: column;
flex: 1; overflow-y: auto; overflow-x: hidden;
}
.pulse-page::-webkit-scrollbar { width: 5px; }
.pulse-page::-webkit-scrollbar-thumb { background: var(--border-strong, var(--border)); border-radius: 3px; }
/* ── Zone 1: Portfolio ─────────────────────── */
.pulse-portfolio { padding: 28px 28px 24px; }
.pulse-kicker { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin-bottom: 4px; }
.pulse-page-title { font-size: 22px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; margin-bottom: 4px; }
.pulse-portfolio-title { font-size: 16px; font-weight: 900; color: var(--text-primary); letter-spacing: -.02em; }
.pulse-portfolio-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pulse-filter-clear-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; color: var(--primary);
background: rgba(124,70,241,.08); border: 1px solid rgba(124,70,241,.2);
border-radius: var(--radius-pill); padding: 3px 10px 3px 8px;
cursor: pointer; transition: background .12s; white-space: nowrap; line-height: 1.4;
}
.pulse-filter-clear-btn:hover { background: rgba(124,70,241,.14); }
.pulse-portfolio-sub { font-size: 12px; color: var(--text-secondary); margin-bottom: 22px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pulse-legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; vertical-align: middle; flex-shrink: 0; }
.pulse-legend-dot--hot { background: #DC2626; }
.pulse-legend-dot--unaddr{ background: #EA580C; }
.pulse-portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pulse-heat-section {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
transition: box-shadow .18s;
}
.pulse-heat-section:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.05); }
.pulse-heat-section-hd {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 13px 16px 12px;
background: linear-gradient(135deg, rgba(124,70,241,.04) 0%, var(--surface) 60%);
border-bottom: 1px solid var(--border);
}
.pulse-heat-section-title {
font-size: 13px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em;
}
.pulse-heat-section-tag {
font-size: 10.5px; font-weight: 600; color: var(--primary);
background: rgba(124,70,241,.08); border-radius: var(--radius-pill);
padding: 3px 10px; border: 1px solid rgba(124,70,241,.18); white-space: nowrap; flex-shrink: 0;
cursor: pointer; transition: background .12s;
}
.pulse-heat-section-tag:hover { background: rgba(124,70,241,.14); }
.pulse-heat-section-bd {
padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 0; flex: 1;
}
.pulse-heat-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px; border-radius: 8px; transition: background .12s; cursor: pointer;
}
.pulse-heat-row:hover { background: var(--surface-2); }
.pulse-heat-row--active { background: rgba(124,70,241,.08) !important; border-radius: var(--radius-l); box-shadow: inset 0 0 0 1.5px rgba(124,70,241,.28); }
.pulse-heat-label { font-size: 12.5px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-heat-bar-track {
flex: 2.5; height: 8px; border-radius: var(--radius-pill);
background: rgba(0,0,0,.06); overflow: hidden; display: flex; min-width: 60px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
.pulse-heat-fill { height: 100%; border-radius: inherit; transition: width .4s cubic-bezier(.4,0,.2,1); }
.pulse-heat-fill--hot { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.pulse-heat-fill--unaddr{ background: linear-gradient(90deg, #C2410C, #FB923C); }
.pulse-heat-count {
font-size: 11px; font-weight: 800; color: var(--text-primary); flex-shrink: 0;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 2px 8px; min-width: 26px; text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.pulse-heat-empty { font-size: 12px; color: var(--text-secondary); font-style: italic; padding: 8px 8px; }
.pulse-zone-divider { height: 1px; background: var(--border); }
/* ── Zone 2: Customer workspace ────────────── */
.pulse-workspace { padding: 24px 28px 48px; }
.pulse-dropdown-wrap { display: flex; flex-direction: column; gap: 6px; max-width: 520px; margin-bottom: 24px; }
.pulse-dropdown-label { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.pulse-workspace-content { min-height: 100px; }
/* Customer header card */
.pulse-customer-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 20px 22px 18px;
margin-bottom: 12px; border-top-width: 3px;
box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
transition: box-shadow .18s;
position: relative;
overflow: hidden;
isolation: isolate;
}
.pulse-customer-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.06); }
.pulse-customer-card--red { border-top-color: #DC2626; }
.pulse-customer-card--amber { border-top-color: #EA580C; }
.pulse-customer-card--yellow { border-top-color: #EAB308; }
.pulse-customer-card--green { border-top-color: #16A34A; }
.pulse-customer-card--signal-eligible::before {
content: "";
position: absolute;
left: -1px;
right: -1px;
top: -1px;
height: 4px;
border-radius: 14px 14px 999px 999px;
background: linear-gradient(90deg, rgba(185,28,28,.78) 0%, rgba(239,68,68,.88) 26%, rgba(249,115,22,.76) 62%, rgba(248,113,113,.58) 100%);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.pulse-customer-card--signal-eligible::after {
content: "";
position: absolute;
top: -1px;
left: -18%;
width: 22%;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,247,225,.62) 16%, rgba(255,252,242,.98) 42%, rgba(251,146,60,.9) 64%, rgba(255,255,255,0));
filter: blur(.35px);
opacity: 0;
pointer-events: none;
z-index: 3;
}
.pulse-customer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pulse-tracker-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 600; color: var(--text-secondary);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 4px 12px;
cursor: pointer; transition: color .12s, border-color .12s, background .12s; white-space: nowrap;
}
.pulse-tracker-btn:hover { color: var(--primary); border-color: rgba(124,70,241,.3); background: rgba(124,70,241,.06); }
.pulse-customer-name { font-size: 19px; font-weight: 800; color: var(--text-primary); letter-spacing: -.025em; line-height: 1.2; }
.pulse-tier-badge { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; letter-spacing: .02em; }
.pulse-tier--red { background: rgba(220,38,38,.1); color: #DC2626; }
.pulse-tier--amber { background: rgba(234,88,12,.1); color: #EA580C; }
.pulse-tier--yellow { background: rgba(234,179,8,.1); color: #EAB308; }
.pulse-tier--green { background: rgba(22,163,74,.1); color: #16A34A; }
.pulse-customer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 16px; }
.pulse-meta-sep { color: var(--border); padding: 0 1px; user-select: none; }
.pulse-meta-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .65; margin-right: 3px; }
.pulse-meta-val { font-weight: 600; color: var(--text-primary); }
/* Pipeline bar */
.pulse-pipeline-bar { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); gap: 3px; margin-bottom: 8px; }
.pulse-pipeline-seg { height: 100%; min-width: 8px; border-radius: var(--radius-pill); transition: flex .4s cubic-bezier(.4,0,.2,1); position: relative; overflow: hidden; }
.pulse-seg--hot { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.pulse-seg--unaddr { background: linear-gradient(90deg, #C2410C, #FB923C); }
.pulse-seg--committed { background: linear-gradient(90deg, #92400E, #FCD34D); }
.pulse-seg--resolved { background: linear-gradient(90deg, #14532D, #4ADE80); }
.pulse-seg--terminal { background: linear-gradient(90deg, #374151, #9CA3AF); opacity: .45; }
.pulse-pipeline-seg-ember {
position: absolute;
inset: -1px auto -1px -34%;
width: 36%;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(255,255,255,0), rgba(255,228,163,.16) 18%, rgba(255,208,120,.34) 42%, rgba(253,186,116,.56) 58%, rgba(248,113,113,.24) 74%, rgba(255,255,255,0));
opacity: 0;
pointer-events: none;
filter: blur(.06px);
box-shadow: 0 0 8px rgba(251,146,60,.18);
}
.pulse-pipeline-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.pulse-pipeline-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-secondary); }
.pulse-pipeline-icon { line-height: 0; flex-shrink: 0; display: flex; align-items: center; }
.pulse-pipeline-legend-count { font-weight: 700; color: var(--text-primary); }
.pulse-pipeline-legend-label { color: var(--text-secondary); }
.pulse-customer-card--signal-ember {
border-top-width: 1px;
border-top-color: transparent !important;
}
.pulse-customer-card--signal-ember::before {
opacity: .94;
}
.pulse-customer-card--signal-ember::after {
opacity: 1;
animation: pulse-hot-ember-ribbon 3.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
.pulse-customer-card--signal-ember .pulse-pipeline-seg--hot-signal {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 12px rgba(239,68,68,.14);
}
.pulse-customer-card--signal-ember .pulse-pipeline-seg-ember {
opacity: 1;
animation: pulse-hot-ember-seg 3.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes pulse-hot-ember-ribbon {
0% { transform: translateX(0) scaleX(.86); opacity: 0; }
10% { opacity: 1; }
52% { transform: translateX(324%) scaleX(1.04); opacity: .86; }
74% { opacity: .34; }
100% { transform: translateX(470%) scaleX(.94); opacity: 0; }
}
@keyframes pulse-hot-ember-seg {
0% { transform: translateX(0) scaleX(.9); opacity: 0; }
10% { opacity: .84; }
52% { transform: translateX(246%) scaleX(1.02); opacity: .62; }
74% { opacity: .14; }
100% { transform: translateX(296%) scaleX(.95); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pulse-customer-card--signal-ember::before,
.pulse-customer-card--signal-ember::after,
.pulse-customer-card--signal-ember .pulse-pipeline-seg-ember {
animation: none !important;
}
}
/* Zero-count chip strip */
.pulse-zero-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pulse-zero-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px 4px 9px; border-radius: var(--radius-pill);
background: var(--surface-2); border: 1px solid var(--border);
font-size: 11.5px; color: var(--text-secondary); white-space: nowrap;
}
.pulse-chip-icon { line-height: 0; display: flex; align-items: center; }
/* Bucket groups — standalone cards */
.pulse-buckets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pulse-bucket-group {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-l); overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pulse-bucket-group[data-bucket="hot"] .pulse-bucket-header { background: rgba(220,38,38,.05); }
.pulse-bucket-group[data-bucket="unaddressed"] .pulse-bucket-header { background: rgba(249,115,22,.05); }
.pulse-bucket-group[data-bucket="committed"] .pulse-bucket-header { background: rgba(234,179,8,.05); }
.pulse-bucket-group[data-bucket="resolved"] .pulse-bucket-header { background: rgba(22,163,74,.05); }
.pulse-bucket-group[data-bucket="terminal"] .pulse-bucket-header { background: rgba(100,116,139,.04); }
.pulse-bucket-group[data-bucket="hot"] .pulse-bucket-emoji { color: #DC2626; }
.pulse-bucket-group[data-bucket="unaddressed"] .pulse-bucket-emoji { color: #EA580C; }
.pulse-bucket-group[data-bucket="committed"] .pulse-bucket-emoji { color: #EAB308; }
.pulse-bucket-group[data-bucket="resolved"] .pulse-bucket-emoji { color: #16A34A; }
.pulse-bucket-group[data-bucket="terminal"] .pulse-bucket-emoji { color: var(--text-secondary); }
.pulse-bucket-header {
display: flex; align-items: center; gap: 10px; width: 100%;
border: none; padding: 13px 16px;
cursor: pointer; text-align: left; transition: background .12s; color: var(--text-primary);
}
.pulse-bucket-header:hover { background: var(--surface-2) !important; }
.pulse-bucket-emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }
.pulse-bucket-label { font-size: 13px; font-weight: 700; flex: 1; }
.pulse-bucket-count {
font-size: 11px; font-weight: 700;
background: var(--surface-2); border: 1px solid var(--border);
color: var(--text-secondary); padding: 2px 9px; border-radius: var(--radius-pill);
}
.pulse-bucket-chevron { color: var(--text-secondary); transition: transform .2s; line-height: 0; }
.pulse-bucket-group--open .pulse-bucket-chevron { transform: rotate(180deg); }
.pulse-bucket-body { display: none; border-top: 1px solid var(--border); padding: 0 16px 12px; }
.pulse-bucket-group--open .pulse-bucket-body { display: block; }
/* Request rows */
.pulse-request-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 4px; border-bottom: 1px solid var(--border);
cursor: pointer; border-radius: var(--radius);
transition: background .1s; margin: 0 -4px;
}
.pulse-request-row:last-of-type { border-bottom: none; }
.pulse-request-row:hover { background: var(--surface-2); }
.pulse-request-row:hover .pulse-open-btn { opacity: 1; }
.pulse-request-main { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; min-width: 0; }
.pulse-request-module { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.pulse-request-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.pulse-owner-tag { font-size: 11px; padding: 2px 8px; background: var(--surface-2); border-radius: var(--radius-pill); color: var(--text-secondary); white-space: nowrap; border: 1px solid var(--border); }
.pulse-owner-tag--pm { background: rgba(124,70,241,.07); color: var(--primary); border-color: rgba(124,70,241,.2); }
.pulse-open-btn { font-size: 11.5px; opacity: 0; transition: opacity .15s; flex-shrink: 0; white-space: nowrap; }
.pulse-also-affects { font-size: 11px; color: var(--text-secondary); font-style: italic; white-space: nowrap; }
.pulse-bucket-empty { font-size: 12.5px; color: var(--text-secondary); padding: 16px 4px; text-align: center; font-style: italic; }
.pulse-terminal-warn {
display: flex; align-items: flex-start; gap: 6px;
font-size: 11.5px; color: #EA580C;
background: rgba(234,88,12,.06); border-radius: var(--radius);
padding: 8px 10px; margin-top: 8px; line-height: 1.5;
}
/* Path to Green — action card */
.pulse-path {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; border-top: 3px solid #EAB308;
box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.05);
padding: 18px 20px; margin-top: 4px;
transition: box-shadow .18s;
}
.pulse-path:hover { box-shadow: 0 8px 28px rgba(0,0,0,.1), 0 2px 5px rgba(0,0,0,.06); }
.pulse-path--green { border-top-color: #16A34A; }
.pulse-path-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pulse-path-progress { display: flex; align-items: center; gap: 8px; }
.pulse-path-arrow-icon { color: var(--text-secondary); line-height: 0; display: flex; opacity: .7; }
.pulse-path-label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.pulse-path-steps { display: flex; flex-direction: column; }
.pulse-path-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pulse-path-step:last-of-type { border-bottom: none; padding-bottom: 2px; }
.pulse-path-step-num {
width: 22px; height: 22px; border-radius: 50%;
color: #fff; font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pulse-path-step-body { flex: 1; min-width: 0; }
.pulse-path-step-text { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.pulse-path-open-btn {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12px; font-weight: 600; color: var(--primary);
background: rgba(124,70,241,.08); border: 1px solid rgba(124,70,241,.2);
border-radius: var(--radius-pill); padding: 4px 10px;
cursor: pointer; white-space: nowrap; transition: background .12s; flex-shrink: 0; line-height: 1.4;
}
.pulse-path-open-btn:hover { background: rgba(124,70,241,.14); }
.pulse-path-tip {
display: flex; align-items: flex-start; gap: 7px;
font-size: 12px; color: var(--text-secondary); line-height: 1.5;
background: var(--surface-2); border-radius: var(--radius);
padding: 8px 12px; margin-top: 14px;
}
.pulse-path-tip--success { color: #16A34A; background: rgba(22,163,74,.06); }
/* Empty state */
.pulse-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 60px 20px; color: var(--text-secondary); text-align: center; }
.pulse-empty-icon { opacity: .25; }
.pulse-empty-text { font-size: 13px; max-width: 260px; line-height: 1.6; }
/* Custom customer dropdown */
.pulse-cust-dd { position: relative; }
.pulse-cust-dd-btn {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l);
padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text-primary);
font-family: inherit; cursor: pointer; text-align: left; outline: none;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pulse-cust-dd-btn:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.pulse-cust-dd-btn:focus,
.pulse-cust-dd-btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,70,241,.14); }
.pulse-cust-dd-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cust-dd-panel {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-l);
box-shadow: 0 12px 32px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto;
}
.pulse-cust-dd-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px; cursor: pointer; transition: background .1s;
border-bottom: 1px solid var(--border);
}
.pulse-cust-dd-item:last-of-type { border-bottom: none; }
.pulse-cust-dd-item:hover { background: var(--surface-2); }
.pulse-cust-dd-item--selected { background: rgba(124,70,241,.05); }
.pulse-cust-dd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pulse-cust-dd-dot--red { background: #DC2626; }
.pulse-cust-dd-dot--amber { background: #EA580C; }
.pulse-cust-dd-dot--yellow { background: #EAB308; }
.pulse-cust-dd-dot--green { background: #16A34A; }
.pulse-cust-dd-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-cust-dd-search-wrap {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.pulse-cust-dd-search-icon { color: var(--text-secondary); line-height: 0; flex-shrink: 0; opacity: .6; }
.pulse-cust-dd-search {
flex: 1; border: none; background: transparent; padding: 2px 0;
font-size: 13px; color: var(--text-primary); outline: none; font-family: inherit;
}
.pulse-cust-dd-search::placeholder { color: var(--text-secondary); opacity: .65; }
.pulse-cust-dd-empty { padding: 14px; font-size: 12.5px; color: var(--text-secondary); text-align: center; font-style: italic; }
.pulse-dd-tier-chips { display: flex; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pulse-dd-tier-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: color .12s, border-color .12s, background .12s; background: none; white-space: nowrap; }
.pulse-dd-tier-chip-count { font-size: 10px; font-weight: 700; opacity: .85; }
.pulse-dd-tier-chip--red { color: #DC2626; border-color: rgba(220,38,38,.22); background: rgba(220,38,38,.06); }
.pulse-dd-tier-chip--amber { color: #EA580C; border-color: rgba(234,88,12,.22); background: rgba(234,88,12,.06); }
.pulse-dd-tier-chip--yellow { color: #A16207; border-color: rgba(161,98,7,.22); background: rgba(161,98,7,.06); }
.pulse-dd-tier-chip--green { color: #16A34A; border-color: rgba(22,163,74,.22); background: rgba(22,163,74,.06); }
.pulse-dd-tier-chip--red.active { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.45); }
.pulse-dd-tier-chip--amber.active { background: rgba(234,88,12,.15); border-color: rgba(234,88,12,.45); }
.pulse-dd-tier-chip--yellow.active { background: rgba(161,98,7,.15); border-color: rgba(161,98,7,.45); }
.pulse-dd-tier-chip--green.active { background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.45); }
.pulse-s2-editable, .pulse-s1-editable { cursor: pointer; transition: outline .1s; border-radius: var(--radius-pill); }
.pulse-s2-editable:hover, .pulse-s1-editable:hover { outline: 2px solid var(--primary); outline-offset: 2px; opacity: 1; }
.pulse-s2-editable:active, .pulse-s1-editable:active { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Responsive */
@media (max-width: 900px) { .pulse-portfolio-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
.pulse-portfolio-grid { grid-template-columns: 1fr; }
.pulse-portfolio, .pulse-workspace { padding: 16px; }
}
/* =============================================================
make-interfaces-feel-better — UI polish pass (shared, additive)
============================================================= */
/* Principle 12 — tactile scale-on-press (always 0.96). Reuses each button's
existing transform transition (added to .icon-btn/.btn-outlined/.btn-text/
.nav-item above; .prog-pill already transitions transform). btn-filled +
kb-ask-btn set scale in their own :active rules. */
.icon-btn:active,
.btn-outlined:active,
.btn-text:active,
.nav-item:active,
.prog-pill:active { transform: scale(0.96); }
/* Principle 16 — extend the most-used small icon button to a 40×40 hit target
without changing its visible 36×36 size (.icon-btn is position:relative). */
.icon-btn::after {
content: "";
position: absolute;
inset: -2px; /* 36 + 2×2 = 40 */
}
/* Principle 9 — tabular numbers on dynamically-updating figures (no width shift) */
.row-count-badge,
.nav-count,
.fp-count,
.btn-badge,
.tl-kpi-value,
.tl-kpi-value--sm,
.esc-kpi-value,
.an-kpi-value,
.kanban-card-arr,
.esc-card-arr,
.dm-arr-inline,
#perCtxCount { font-variant-numeric: tabular-nums; }
/* Principle 10 — text wrapping: balance short headings, pretty short body text */
.page-title,
.dialog-title,
.col-mgr-header h3,
.an-card-title,
.settings-section-title,
.esc-title-row h2,
.notif-title-row h2,
.notif-header h3,
.placeholder-view h2,
.sf-title { text-wrap: balance; }
.tl-kpi-sub,
.esc-kpi-sub,
.an-kpi-sub,
.form-label,
.sf-empty { text-wrap: pretty; }
/* Principle 11 — subtle neutral outline on content images (avatars only) */
img.cu-assignee-avatar { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; }
body.dark img.cu-assignee-avatar { outline-color: rgba(255, 255, 255, 0.1); }
/* Principle 7 — theme-toggle icon cross-fade (sun ↔ moon), driven by body.dark.
Both icons live in #themeIcon; CSS swaps them. ROLLBACK: restore the single
in index.html + the setAttribute lines in applyTheme. */
.theme-icon-swap { position: relative; display: inline-flex; width: 17px; height: 17px; }
.theme-icon-swap svg {
position: absolute; inset: 0; width: 17px; height: 17px;
transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1), filter .3s cubic-bezier(.2,0,0,1);
}
/* light mode → show moon, hide sun */
.theme-icon-swap .ti-sun { opacity: 0; transform: scale(.25); filter: blur(4px); }
.theme-icon-swap .ti-moon { opacity: 1; transform: scale(1); filter: blur(0); }
/* dark mode → show sun, hide moon */
body.dark .theme-icon-swap .ti-sun { opacity: 1; transform: scale(1); filter: blur(0); }
body.dark .theme-icon-swap .ti-moon { opacity: 0; transform: scale(.25); filter: blur(4px); }
/* Principle 5 — staggered view-enter (toolbar → KPIs → table cascade).
OPT-IN + EASY ROLLBACK: remove the word "stagger-views" from in
index.html and behavior reverts EXACTLY to the single-block view-enter.
Nothing else references this; the original .view-enter-anim rule is untouched. */
body.stagger-views .view.view-enter-anim { animation: none; }
/* Multi-section views (e.g. all-requests): stagger the direct children. */
body.stagger-views .view.view-enter-anim > * { animation: view-stagger-enter .42s var(--ease) both; }
body.stagger-views .view.view-enter-anim > *:nth-child(1) { animation-delay: 0ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(2) { animation-delay: 80ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(3) { animation-delay: 160ms; }
body.stagger-views .view.view-enter-anim > *:nth-child(n+4) { animation-delay: 220ms; }
/* Single-wrapper views (escalations, analytics, pulse, PER pages): the view has
one container child, so descend one level and stagger the wrapper's sections. */
body.stagger-views .view.view-enter-anim > *:only-child { animation: none; }
body.stagger-views .view.view-enter-anim > *:only-child > * { animation: view-stagger-enter .42s var(--ease) both; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(1) { animation-delay: 0ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(2) { animation-delay: 80ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(3) { animation-delay: 160ms; }
body.stagger-views .view.view-enter-anim > *:only-child > *:nth-child(n+4) { animation-delay: 220ms; }
@keyframes view-stagger-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Accessibility — honor "reduce motion": neutralize all animations + transitions.
Keep a 0.01ms tick so transitionend/animationend listeners still fire. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Border Beam — vanilla port of Magic UI's border-beam (no npm/React) ─────────────
Opt-in: add class "border-beam" to any element that has a border-radius.
A bright comet of light travels around the element's border ring.
Pure CSS: rotating conic-gradient masked to a thin ring. Rollback = remove the class.
Tune per element with CSS vars (all optional):
--bb-size ring thickness (default 1.5px)
--bb-duration one full lap (default 4s)
--bb-color beam core color (default Keka royal blue #7C46F1)
--bb-tip beam hot tip color (default #b794ff)
Graceful degradation: browsers without @property support skip the rotation and
show a static gradient edge (no crash). Reduced-motion is honored by the global
block above (animation neutralized via !important). */
@property --bb-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
@keyframes bb-rotate {
to { --bb-angle: 360deg; }
}
.border-beam {
position: relative;
isolation: isolate;
}
.border-beam::after {
content: "";
position: absolute;
inset: 0;
padding: var(--bb-size, 1.5px);
border-radius: inherit;
background: conic-gradient(
from var(--bb-angle),
transparent 0deg 300deg,
var(--bb-color, #7C46F1) 340deg,
var(--bb-tip, #b794ff) 354deg,
transparent 360deg
);
/* show only the padding ring: full-box mask XOR content-box mask */
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 1;
animation: bb-rotate var(--bb-duration, 4s) linear infinite;
}
/* Ask Kekabot search-bar beam moved into the .kb-query-bar rules above (background-clip
method). The old mask-composite ::after was removed — it rendered as a full fill in
Safari/older WebKit. */
|