/* ========================================================================
Config2 V3 — UI Redesign
Ported from docs/design-v3/project/Home Redesign.html
Scope: only pages that live under /v3/... (V3MainLayout applies .v3-app)
======================================================================== */
/* V3 CSS custom properties are scoped here.
`.v3-app` covers the main layout. `.v3-dialog` covers Radzen dialogs —
they render at root, OUTSIDE `.v3-app`, so without this every
`var(--*)` in dialog CSS resolves to empty (transparent backgrounds,
unset colors). We opt every V3 dialog in via `CssClass="v3-dialog ..."`
so the vars reach the dialog content and all its children. */
.v3-app,
.v3-dialog {
/* Brand */
--teal-900: #0B2A36;
--teal-800: #113D4F;
--teal-700: #1A536B;
--teal-100: #E2ECEF;
--teal-50: #F1F6F7;
/* Surfaces */
--bg: #FAFAF7;
--surface: #FFFFFF;
--line: #E6E4DD;
--line-soft:#EFEDE6;
--ink: #141617;
--ink-2: #3A3F42;
--ink-3: #6C7176;
--ink-4: #9BA1A6;
/* Accent */
--amber: #C8892A;
--amber-50: #F7EFDE;
--green: #3C8F5B;
--green-50: #E5F1EA;
--red: #B4482F;
--red-50: #F7E8E3;
/* Radii + shadow */
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--shadow: 0 1px 0 rgba(17,61,79,0.04), 0 1px 2px rgba(17,61,79,0.05);
--shadow-hover: 0 2px 0 rgba(17,61,79,0.04), 0 8px 24px rgba(17,61,79,0.08);
/* Fonts */
--sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
display: grid;
grid-template-columns: var(--side-w, 240px) 1fr;
height: 100vh;
overflow: hidden;
transition: grid-template-columns 200ms ease;
}
.v3-app[data-theme="dark"] {
--teal-900: #E6EEF0;
--teal-800: #D6E2E5;
--teal-700: #BFCFD3;
--teal-100: #1F3B46;
--teal-50: #16303A;
--bg: #0D1618;
--surface: #141F22;
--line: #253338;
--line-soft:#1C292D;
--ink: #EDEFEE;
--ink-2: #C7CCCD;
--ink-3: #8E9699;
--ink-4: #5E676B;
--amber-50: #3A2E18;
--green-50: #16332A;
--red-50: #33201C;
--shadow: 0 1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.35);
--shadow-hover: 0 2px 0 rgba(0,0,0,0.3), 0 10px 26px rgba(0,0,0,0.45);
}
.v3-app[data-sidebar="collapsed"] { --side-w: 64px; }
.v3-app *, .v3-app *::before, .v3-app *::after { box-sizing: border-box; }
.v3-app button { font: inherit; color: inherit; cursor: pointer; }
.v3-app a { color: inherit; text-decoration: none; }
.v3-app .mono { font-family: var(--mono); font-feature-settings: "ss01","cv11"; letter-spacing: -0.01em; }
.v3-app .num { font-variant-numeric: tabular-nums; }
/* ===== Sidebar ===== */
.v3-side {
background: var(--surface);
border-right: 1px solid var(--line);
padding: 14px 10px;
display: flex;
flex-direction: column;
gap: 2px;
position: sticky; top: 0; height: 100vh;
overflow: hidden;
}
.v3-side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.v3-side-brand .v3-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--teal-800); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: -0.02em; flex: none; }
.v3-app[data-theme="dark"] .v3-side-brand .v3-logo { background: var(--teal-100); color: var(--teal-900); }
.v3-side-brand .name { font-weight: 600; letter-spacing: -0.01em; font-size: 14px; white-space: nowrap; }
.v3-side-brand .name em { font-style: normal; color: var(--ink-3); font-weight: 400; margin-left: 6px; font-size: 12px; }
.v3-side-group { padding: 10px 8px 6px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }
.v3-nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.v3-nav-item:hover { background: var(--teal-50); color: var(--teal-800); }
.v3-nav-item.active { background: var(--teal-100); color: var(--teal-800); font-weight: 500; }
.v3-nav-item .icon { width: 16px; height: 16px; flex: none; }
.v3-nav-item .chev { margin-left: auto; color: var(--ink-4); font-size: 10px; }
.v3-nav-sub { display: flex; flex-direction: column; gap: 1px; padding-left: 22px; margin: 2px 0 4px; }
.v3-nav-sub .v3-nav-item { padding: 5px 10px; font-size: 13px; color: var(--ink-3); }
.v3-app[data-sidebar="collapsed"] .v3-side-brand .name,
.v3-app[data-sidebar="collapsed"] .v3-side-group,
.v3-app[data-sidebar="collapsed"] .v3-nav-item .label,
.v3-app[data-sidebar="collapsed"] .v3-nav-item .chev,
.v3-app[data-sidebar="collapsed"] .v3-nav-sub { display: none; }
.v3-app[data-sidebar="collapsed"] .v3-nav-item { justify-content: center; padding: 7px; }
.v3-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
/* ===== Main ===== */
.v3-main { min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overflow-x: hidden; }
.v3-topbar {
display: flex; align-items: center; gap: 16px;
padding: 12px 24px;
border-bottom: 1px solid var(--line);
background: var(--surface);
position: sticky; top: 0; z-index: 10;
}
.v3-topbar .crumb { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.v3-topbar .crumb b { color: var(--ink); font-weight: 500; }
.v3-topbar .spacer { flex: 1; }
.v3-topbar .search {
display: flex; align-items: center; gap: 8px;
background: var(--bg); border: 1px solid var(--line);
border-radius: var(--r-sm); padding: 6px 10px;
width: 320px; color: var(--ink-3);
}
.v3-topbar .search input { background: transparent; border: 0; outline: 0; color: var(--ink); width: 100%; font: inherit; }
.v3-topbar .search .kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-4); padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.v3-topbar .user { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.v3-content { padding: 28px 24px 60px; max-width: 1440px; margin: 0 auto; width: 100%; }
/* ===== Grid + density ===== */
.v3-grid { display: grid; gap: 16px; }
.v3-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v3-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-density="compact"] .v3-grid { gap: 12px; }
[data-density="spacious"] .v3-grid { gap: 22px; }
/* Family color system */
.fam-air { --fam: #2F8A9E; --fam-soft: #DDF0F3; --fam-deep: #0E4E5E; }
.fam-material { --fam: #C8892A; --fam-soft: #F8EDD4; --fam-deep: #7A4E10; }
.fam-layouts { --fam: #7A4A8F; --fam-soft: #EEE4F4; --fam-deep: #3E2252; }
.fam-vessels { --fam: #3C8F5B; --fam-soft: #DFF1E4; --fam-deep: #1C5A33; }
.fam-thermal { --fam: #B4482F; --fam-soft: #F5DED6; --fam-deep: #6A2614; }
.fam-doors { --fam: #4E6CC9; --fam-soft: #DFE6FA; --fam-deep: #223A8E; }
.fam-samples { --fam: #6C7176; --fam-soft: #E9E9E8; --fam-deep: #3A3F42; }
.v3-app[data-theme="dark"] .fam-air { --fam-soft: #0F3038; }
.v3-app[data-theme="dark"] .fam-material { --fam-soft: #3A2E16; }
.v3-app[data-theme="dark"] .fam-layouts { --fam-soft: #2B1A38; }
.v3-app[data-theme="dark"] .fam-vessels { --fam-soft: #153524; }
.v3-app[data-theme="dark"] .fam-thermal { --fam-soft: #3A1B12; }
.v3-app[data-theme="dark"] .fam-doors { --fam-soft: #1A224A; }
.v3-app[data-theme="dark"] .fam-samples { --fam-soft: #242628; }
.v3-render {
position: relative;
background:
radial-gradient(120% 100% at 30% 0%, color-mix(in oklab, var(--fam, var(--teal-800)) 18%, var(--surface)) 0%, var(--fam-soft, var(--teal-50)) 60%, color-mix(in oklab, var(--fam, var(--teal-800)) 6%, var(--surface)) 100%);
border-radius: var(--r-md);
overflow: hidden;
aspect-ratio: 4/3;
display: grid; place-items: center;
border: 1px solid color-mix(in oklab, var(--fam, var(--teal-800)) 18%, var(--line));
}
.v3-render::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(color-mix(in oklab, var(--fam, var(--teal-800)) 10%, transparent) 1px, transparent 1px) 0 0 / 18px 18px,
linear-gradient(90deg, color-mix(in oklab, var(--fam, var(--teal-800)) 10%, transparent) 1px, transparent 1px) 0 0 / 18px 18px;
pointer-events: none; opacity: 0.5;
}
.v3-render svg { position: relative; z-index: 1; width: 72%; height: 72%; display: block; }
.v3-render svg * { stroke: var(--fam-deep, var(--teal-800)) !important; }
.v3-render-img {
position: relative; z-index: 1;
width: 100%; height: 100%;
object-fit: contain;
padding: 10%;
display: block;
}
.family-stripe { height: 3px; background: var(--fam, var(--teal-800)); border-radius: 3px 3px 0 0; }
/* Badges */
.v3-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.02em; border: 1px solid transparent; }
.badge-release { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-100); }
.badge-test { background: var(--amber-50); color: var(--amber); border-color: color-mix(in oklab, var(--amber) 40%, transparent); }
.badge-design { background: #EDEAE3; color: #6E5A2A; border-color: #E0DACB; }
.badge-external{ background: #F2E9E6; color: var(--red); border-color: #EAD7D1; }
.v3-app[data-theme="dark"] .badge-design { background: #2A2518; color: #D4C79C; border-color: #3B3420; }
.v3-app[data-theme="dark"] .badge-external { background: #30201C; color: #E59A82; border-color: #4A2E27; }
/* Buttons */
.v3-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: background 120ms, border-color 120ms, transform 80ms; justify-content: center; }
.v3-btn:hover { border-color: var(--ink-4); }
.v3-btn:active { transform: translateY(1px); }
.v3-btn.v3-btn-primary,
.v3-btn.v3-btn-primary:link,
.v3-btn.v3-btn-primary:visited { background: var(--teal-800); color: #fff; border-color: var(--teal-800); }
.v3-btn.v3-btn-primary * { color: #fff; }
.v3-btn.v3-btn-primary:hover { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
.v3-app[data-theme="dark"] .v3-btn.v3-btn-primary,
.v3-app[data-theme="dark"] .v3-btn.v3-btn-primary * { background: var(--teal-100); color: var(--teal-900); border-color: var(--teal-100); }
.v3-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.v3-btn-ghost:hover { background: var(--teal-50); color: var(--teal-800); border-color: transparent; }
.v3-btn-sm { padding: 5px 10px; font-size: 12.5px; }
.v3-btn-icon { padding: 6px; }
/* Toolbar */
.v3-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.v3-toolbar .spacer { flex: 1; }
/* Elegant search input */
.v3-search {
position: relative;
display: flex; align-items: center; gap: 8px;
min-width: 280px;
padding: 0 10px 0 34px;
height: 34px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
color: var(--ink-3);
transition: border-color 140ms, box-shadow 140ms, background 140ms;
}
.v3-search:hover { border-color: var(--ink-4); }
.v3-search:focus-within {
border-color: var(--teal-800);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-800) 15%, transparent);
background: var(--surface);
}
.v3-app[data-theme="dark"] .v3-search:focus-within { border-color: var(--teal-100); box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-100) 20%, transparent); }
.v3-search .v3-search-icon {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
display: inline-flex; color: var(--ink-4); pointer-events: none;
}
.v3-search:focus-within .v3-search-icon { color: var(--teal-800); }
.v3-app[data-theme="dark"] .v3-search:focus-within .v3-search-icon { color: var(--teal-100); }
.v3-search input {
flex: 1; min-width: 0;
background: transparent; border: 0; outline: 0;
color: var(--ink); font: inherit; font-size: 13px;
padding: 0;
}
.v3-search input::placeholder { color: var(--ink-4); }
.v3-search-clear {
display: grid; place-items: center;
width: 18px; height: 18px;
padding: 0; border: 0; border-radius: 50%;
background: var(--line-soft); color: var(--ink-3);
font-size: 14px; line-height: 1; cursor: pointer;
transition: background 120ms, color 120ms;
}
.v3-search-clear:hover { background: var(--ink-4); color: var(--surface); }
/* Loading + empty */
.v3-loading, .v3-empty {
padding: 60px 20px; text-align: center;
border: 1px dashed var(--line); border-radius: var(--r-md);
color: var(--ink-3); background: var(--surface);
}
.v3-empty h3 { margin: 0 0 6px; color: var(--ink); font-size: 16px; font-weight: 600; }
.v3-empty p { margin: 0; font-size: 13px; }
/* Design-version switcher (pill in topbar) */
.v3-design-toggle { display: inline-flex; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.v3-design-toggle button {
padding: 4px 12px; border: 0; background: transparent; color: var(--ink-3);
border-radius: 999px; font-size: 12px; font-weight: 500; cursor: pointer;
transition: background 120ms, color 120ms;
}
.v3-design-toggle button:hover { color: var(--ink); }
.v3-design-toggle button.on { background: var(--teal-800); color: #fff; }
.v3-app[data-theme="dark"] .v3-design-toggle button.on { background: var(--teal-100); color: var(--teal-900); }
.v3-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.v3-chip.on { border-color: var(--teal-800); color: var(--teal-800); background: var(--teal-50); }
.v3-select-pill {
padding: 6px 28px 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
font: inherit; font-size: 13px; color: var(--ink); appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
}
/* Page heading */
.v3-h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.v3-lead { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; }
/* Product card */
.v3-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden; transition: box-shadow 180ms, transform 180ms;
box-shadow: var(--shadow);
display: flex; flex-direction: column;
}
.v3-card:hover { box-shadow: var(--shadow-hover); }
.v3-card .v3-render-wrap { position: relative; }
.v3-card .v3-render { aspect-ratio: 4/3; border-radius: 0; border: 0; border-bottom: 1px solid var(--line-soft); }
.v3-card .v3-ribbon { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.v3-card .v3-fav { position: absolute; top: 10px; right: 10px; z-index: 5; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); transition: color 120ms, border-color 120ms, background 120ms; pointer-events: auto; }
.v3-card .v3-fav > * { pointer-events: none; }
.v3-card .v3-fav:hover { color: var(--amber); border-color: var(--amber); }
.v3-card .v3-fav.on { color: var(--amber); border-color: var(--amber); background: var(--amber-50); }
.v3-card .v3-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.v3-card h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.v3-card .pid { font-size: 11px; color: var(--ink-4); }
.v3-card .desc { margin: 4px 0 10px; font-size: 13px; color: var(--ink-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.v3-card .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-3); }
.v3-card .meta .sep { color: var(--ink-4); }
.v3-card .actions { display: flex; gap: 8px; margin-top: 14px; }
.v3-card .actions .v3-btn { flex: 1; }
.v3-card .name-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.v3-card .star-filled { color: var(--amber); }
.v3-card .star-empty { color: var(--ink-4); }
/* Pager */
.v3-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; gap: 12px; }
.v3-pager .pages { display: flex; gap: 4px; align-items: center; }
.v3-pager .pages .v3-btn { min-width: 32px; }
.v3-pager-info { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.v3-pager-info b { color: var(--ink-2); font-weight: 600; }
.v3-pager-ellipsis { color: var(--ink-4); padding: 0 4px; font-size: 13px; }
/* Fade-in stagger */
@keyframes v3FadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v3-fade-in > * { animation: v3FadeUp 360ms ease both; }
.v3-fade-in > *:nth-child(1) { animation-delay: 0ms; }
.v3-fade-in > *:nth-child(2) { animation-delay: 40ms; }
.v3-fade-in > *:nth-child(3) { animation-delay: 80ms; }
.v3-fade-in > *:nth-child(4) { animation-delay: 120ms; }
.v3-fade-in > *:nth-child(5) { animation-delay: 160ms; }
.v3-fade-in > *:nth-child(6) { animation-delay: 200ms; }
.v3-fade-in > *:nth-child(7) { animation-delay: 240ms; }
.v3-fade-in > *:nth-child(8) { animation-delay: 280ms; }
/* Stub pages */
.v3-stub { padding: 60px 20px; text-align: center; color: var(--ink-3); }
.v3-stub h2 { color: var(--ink); margin: 0 0 8px; font-size: 20px; font-weight: 600; }
/* ========================================================================
Details page (V3)
======================================================================== */
.v3-app .v3-details-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.v3-app .v3-details-head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.v3-app .v3-details-head .sub { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; }
.v3-app .v3-details-head .spacer { flex: 1; }
.v3-app .v3-details-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 1024px) {
.v3-app .v3-details-grid { grid-template-columns: 1fr; align-items: start; }
}
.v3-app .v3-details-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.v3-app .v3-details-hero .hero-body { flex: 1; min-height: 0; overflow-y: auto; }
.v3-app .v3-details-main { display: flex; flex-direction: column; min-width: 0; }
.v3-app .v3-details-hero .hero-media { aspect-ratio: 4/3; background: var(--teal-50); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.v3-app .v3-details-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.v3-app .v3-details-hero .hero-placeholder { font-size: 48px; font-weight: 600; color: var(--teal-800); letter-spacing: 0.02em; }
.v3-app .v3-details-hero .hero-body { padding: 16px 18px 18px; }
.v3-app .v3-details-hero h1 { margin: 0 0 2px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.v3-app .v3-details-hero .desc { margin: 10px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.v3-app .v3-details-hero .hero-actions { margin-top: 18px; }
.v3-app .v3-details-hero .hero-actions .v3-btn { width: 100%; justify-content: center; }
.v3-app .v3-details-hero .v3-field select { width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 13px; }
/* Configurations table */
.v3-app .v3-cfg-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; }
.v3-app .v3-cfg-table .row { display: grid; grid-template-columns: 2fr 0.7fr 1fr 1.2fr 1fr 1.4fr; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.v3-app .v3-cfg-table .row:last-child { border-bottom: 0; }
.v3-app .v3-cfg-table .row.head { background: var(--teal-50); color: var(--ink-3); font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; padding: 8px 14px; }
.v3-app .v3-cfg-table .row:not(.head):hover { background: var(--teal-50); }
.v3-app .v3-cfg-table .col { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v3-app .v3-cfg-table .col.actions { display: flex; gap: 4px; justify-content: flex-end; }
.v3-app .v3-cfg-table .col.actions .v3-btn { padding: 4px 8px; min-width: 28px; }
.v3-app .v3-cfg-table .col.actions .v3-btn.danger { color: var(--red); }
.v3-app .v3-cfg-table .col.actions .v3-btn.danger:hover { background: var(--red-50); border-color: var(--red); }
.v3-app .v3-cfg-table .col .sub { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.v3-app .v3-cfg-table .col .link { background: none; border: 0; padding: 0; color: var(--teal-800); font-weight: 500; text-align: left; cursor: pointer; font-size: 13px; }
.v3-app .v3-cfg-table .col .link:hover { text-decoration: underline; }
@media (max-width: 900px) {
.v3-app .v3-cfg-table .row { grid-template-columns: 1fr 1fr; }
.v3-app .v3-cfg-table .row.head { display: none; }
.v3-app .v3-cfg-table .col.actions { grid-column: 1 / -1; justify-content: flex-start; }
}
/* Status badges used in configurations table */
.v3-app .v3-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 999px; letter-spacing: 0.02em; border: 1px solid transparent; }
.v3-app .v3-badge-release { background: var(--green-50); color: var(--green); border-color: var(--green); }
.v3-app .v3-badge-design { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-100); }
.v3-app .v3-badge-test { background: var(--amber-50); color: var(--amber); border-color: var(--amber); }
.v3-app .v3-badge-default { background: var(--surface); color: var(--ink-3); border-color: var(--line); }
/* Scrim is only visible when the sidebar is a mobile drawer (see @media rules). */
.v3-side-scrim { display: none; }
/* ========================================================================
Users page
Ported from docs/design-v3/project/Users Redesign.html
======================================================================== */
/* Page header w/ actions */
.v3-page-h { display: flex; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.v3-page-h .v3-h1 { font-size: 28px; line-height: 1.1; }
.v3-page-h-actions { margin-left: auto; display: flex; gap: 8px; flex: none; }
/* Seat hero */
.v3-seat-hero {
display: grid; grid-template-columns: 1fr 260px; gap: 24px;
padding: 20px 22px;
background:
radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--teal-800) 8%, var(--surface)) 0%, var(--surface) 60%),
var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
margin-bottom: 20px;
box-shadow: var(--shadow);
}
.v3-seat-hero .main { min-width: 0; }
.v3-seat-hero .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.v3-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.v3-seat-count { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.v3-seat-count .big { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--teal-800); line-height: 1; }
.v3-app[data-theme="dark"] .v3-seat-count .big { color: var(--teal-100); }
.v3-seat-count .sep { font-size: 28px; color: var(--ink-4); font-weight: 300; }
.v3-seat-count .total { font-size: 22px; color: var(--ink-2); font-weight: 500; }
.v3-seat-count .unit { margin-left: 8px; color: var(--ink-3); font-size: 13px; }
.v3-seat-meta { display: flex; flex-direction: column; gap: 6px; text-align: right; font-size: 13px; color: var(--ink-3); }
.v3-seat-meta .row { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.v3-seat-meta b { color: var(--ink); font-weight: 600; }
.v3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); display: inline-block; }
.v3-dot-green { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 20%, transparent); }
.v3-dot-amber { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 20%, transparent); }
.v3-dot-red { background: var(--red); }
.v3-seat-bar { display: flex; gap: 2px; height: 10px; background: var(--line-soft); border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.v3-seat-bar .seg { height: 100%; transition: flex 200ms; }
.v3-seat-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12.5px; }
.v3-seat-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.v3-seat-legend .sw { width: 8px; height: 8px; border-radius: 2px; }
.v3-seat-legend .num { color: var(--ink-3); font-weight: 500; }
.v3-seat-hero .aside { border-left: 1px solid var(--line-soft); padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.v3-seat-hero .aside .v3-btn { justify-content: flex-start; }
.v3-seat-hero .note { margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
/* Tabs */
.v3-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.v3-tab { padding: 10px 14px; background: transparent; border: 0; color: var(--ink-3); font-size: 13.5px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; }
.v3-tab:hover { color: var(--ink); }
.v3-tab.on { color: var(--teal-800); border-bottom-color: var(--teal-800); }
.v3-app[data-theme="dark"] .v3-tab.on { color: var(--teal-100); border-bottom-color: var(--teal-100); }
.v3-tab-count { background: var(--line-soft); color: var(--ink-2); padding: 1px 7px; font-size: 11px; border-radius: 999px; font-weight: 600; }
.v3-tab-count.amber { background: var(--amber-50); color: var(--amber); }
/* Filter bar */
.v3-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; }
.v3-filter-bar .search { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 10px; color: var(--ink-3); min-width: 280px; }
.v3-filter-bar .search input { background: transparent; border: 0; outline: 0; color: var(--ink); width: 100%; font: inherit; }
.v3-filter-group { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.v3-fg-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); font-weight: 600; margin-right: 2px; }
.v3-result-count { color: var(--ink-3); font-size: 12.5px; margin-left: auto; }
/* Avatar */
.v3-avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 600; letter-spacing: 0.01em; flex: none; text-transform: uppercase; width: 32px; height: 32px; font-size: 11.5px; color: #fff; background: var(--teal-700); }
/* Role pill — colors driven by role class so dark mode can override */
.v3-role-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid; font-weight: 500; white-space: nowrap; padding: 2px 10px; font-size: 12px; }
.v3-role-dot { width: 6px; height: 6px; border-radius: 50%; }
.v3-role-admin { background: #EDEAE3; color: #6E5A2A; border-color: #E0DACB; }
.v3-role-admin .v3-role-dot { background: #C8892A; }
.v3-role-designer { background: #EEE4F4; color: #3E2252; border-color: #DACCE4; }
.v3-role-designer .v3-role-dot { background: #7A4A8F; }
.v3-role-engineer { background: #DDF0F3; color: #0E4E5E; border-color: #C6E1E5; }
.v3-role-engineer .v3-role-dot { background: #2F8A9E; }
.v3-role-sales { background: #DFF1E4; color: #1C5A33; border-color: #C7E3CE; }
.v3-role-sales .v3-role-dot { background: #3C8F5B; }
.v3-role-viewer { background: #E9E9E8; color: #3A3F42; border-color: #D4D4D2; }
.v3-role-viewer .v3-role-dot { background: #6C7176; }
.v3-role-external { background: #F5DED6; color: #6A2614; border-color: #EAD0C6; }
.v3-role-external .v3-role-dot { background: #B4482F; }
.v3-app[data-theme="dark"] .v3-role-admin { background: #2A2518; color: #E9C88A; border-color: #3B3420; }
.v3-app[data-theme="dark"] .v3-role-designer { background: #2B1A38; color: #D4B8E0; border-color: #3D2852; }
.v3-app[data-theme="dark"] .v3-role-engineer { background: #0F3038; color: #9BD5E0; border-color: #1B4450; }
.v3-app[data-theme="dark"] .v3-role-sales { background: #15331F; color: #9BD5AC; border-color: #224A30; }
.v3-app[data-theme="dark"] .v3-role-viewer { background: #242628; color: #B8BCBE; border-color: #323639; }
.v3-app[data-theme="dark"] .v3-role-external { background: #3A1B12; color: #E59A82; border-color: #532A1E; }
/* Status text */
.v3-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.v3-status-on { color: #1C5A33; }
.v3-status-on .v3-dot { background: var(--green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--green) 20%, transparent); }
.v3-app[data-theme="dark"] .v3-status-on { color: #9BD5AC; }
.v3-status-active { color: var(--ink-3); }
.v3-status-active .v3-dot { background: var(--ink-4); }
.v3-status-off { color: var(--red); }
.v3-status-off .v3-dot { background: var(--red); }
/* Auth tag */
.v3-auth-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-3); background: var(--bg); margin-right: 3px; font-weight: 500; }
.v3-auth-sso { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-100); }
.v3-auth-2fa { background: #E2F1E7; color: #1C5A33; border-color: color-mix(in oklab, var(--green) 25%, transparent); }
.v3-auth-local { background: var(--amber-50); color: #7A4E10; border-color: color-mix(in oklab, var(--amber) 25%, transparent); }
.v3-app[data-theme="dark"] .v3-auth-2fa { color: #9BD5AC; background: #15331F; }
.v3-app[data-theme="dark"] .v3-auth-local { color: #E9C88A; }
/* Users table */
.v3-utable { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.v3-utr { display: grid; grid-template-columns: 2.2fr 1.4fr 1.1fr 0.9fr 1fr 1.2fr 1.1fr 120px; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.v3-utr:last-child { border-bottom: 0; }
.v3-uthead { background: color-mix(in oklab, var(--teal-800) 3%, var(--surface)); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
.v3-app[data-theme="dark"] .v3-uthead { background: color-mix(in oklab, var(--teal-100) 10%, var(--surface)); }
.v3-uth { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.v3-utd { min-width: 0; }
.v3-urow { cursor: pointer; transition: background 120ms; }
.v3-urow:hover { background: var(--teal-50); }
.v3-urow-off { opacity: 0.58; }
.v3-urow-off:hover { opacity: 0.85; }
.v3-u-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v3-u-user .body { min-width: 0; }
.v3-u-name { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; }
.v3-u-email { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-u-dept { color: var(--ink-2); font-size: 13px; }
.v3-u-last { color: var(--ink-2); font-size: 12.5px; }
.v3-u-configs { display: flex; align-items: center; gap: 8px; }
.v3-u-configs .n { font-weight: 600; color: var(--ink); min-width: 24px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.v3-mini-bar { flex: 1; height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; max-width: 80px; }
.v3-mini-bar > div { height: 100%; background: var(--teal-800); }
.v3-app[data-theme="dark"] .v3-mini-bar > div { background: var(--teal-100); }
.v3-u-actions { display: flex; justify-content: flex-end; gap: 2px; }
.v3-u-actions .v3-btn-icon { color: var(--ink-3); padding: 6px; }
.v3-u-actions .v3-btn-icon:hover { color: var(--ink); }
.v3-u-actions .v3-btn-icon.danger:hover { color: var(--red); background: #F5DED6; border-color: transparent; }
/* Invitation table */
.v3-inv-tr, .v3-inv-th { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 100px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.v3-inv-th { background: color-mix(in oklab, var(--teal-800) 3%, var(--surface)); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.v3-inv-tr:last-child { border-bottom: 0; }
.v3-inv-mail { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-inv-by, .v3-inv-expire { color: var(--ink-3); font-size: 12px; }
.v3-inv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; }
.v3-inv-pending { color: #7A4E10; background: var(--amber-50); border-color: color-mix(in oklab, var(--amber) 30%, transparent); }
.v3-inv-pending .v3-dot { background: var(--amber); }
.v3-inv-expired { color: var(--red); background: #F5DED6; border-color: color-mix(in oklab, var(--red) 30%, transparent); }
.v3-inv-expired .v3-dot { background: var(--red); }
.v3-inv-accepted { color: #1C5A33; background: #E2F1E7; border-color: color-mix(in oklab, var(--green) 30%, transparent); }
.v3-inv-accepted .v3-dot { background: var(--green); }
.v3-app[data-theme="dark"] .v3-inv-pending { color: #E9C88A; background: #3A2E18; }
.v3-app[data-theme="dark"] .v3-inv-expired { color: #E59A82; background: #3A1B12; }
.v3-app[data-theme="dark"] .v3-inv-accepted { color: #9BD5AC; background: #15331F; }
.v3-inv-actions { display: flex; gap: 2px; justify-content: flex-end; }
@media (max-width: 1100px) {
.v3-seat-hero { grid-template-columns: 1fr; }
.v3-seat-hero .aside { border-left: 0; border-top: 1px solid var(--line-soft); padding-left: 0; padding-top: 14px; }
}
/* ========================================================================
Responsive — tablet + phone
Breakpoints:
<= 1200: 3 columns for product grid
<= 900: sidebar becomes off-canvas, topbar compacts, 2-col grid
<= 600: single column, tighter spacing, simplified topbar
======================================================================== */
@media (max-width: 1200px) {
.v3-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v3-content { padding: 24px 20px 60px; }
}
@media (max-width: 900px) {
/* Collapse the app grid to a single column; sidebar becomes a drawer. */
.v3-app { grid-template-columns: 1fr; }
.v3-side {
position: fixed; top: 0; left: 0;
width: 280px; height: 100vh; z-index: 60;
transform: translateX(-100%);
transition: transform 220ms ease;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.v3-app[data-sidebar="expanded"] .v3-side { transform: translateX(0); }
/* Always show labels inside the drawer even when the app is in "collapsed" state. */
.v3-app[data-sidebar="collapsed"] .v3-side { transform: translateX(-100%); }
.v3-side-scrim {
position: fixed; inset: 0;
background: rgba(17,61,79,0.35);
z-index: 50;
animation: v3SideScrim 180ms ease;
}
.v3-app[data-theme="dark"] .v3-side-scrim { background: rgba(0,0,0,0.55); }
.v3-app[data-sidebar="expanded"] .v3-side-scrim { display: block; }
@keyframes v3SideScrim { from { opacity: 0; } to { opacity: 1; } }
.v3-topbar { padding: 10px 14px; gap: 10px; }
.v3-topbar .crumb { display: none; }
.v3-topbar .v3-search { display: none; }
.v3-topbar .kbd { display: none; }
.v3-design-toggle button { padding: 4px 10px; font-size: 11.5px; }
.v3-content { padding: 20px 14px 60px; max-width: 100%; }
.v3-page-h { flex-direction: column; align-items: stretch; gap: 12px; }
.v3-page-h-actions { margin-left: 0; }
.v3-h1 { font-size: 22px; }
.v3-page-h .v3-h1 { font-size: 24px; }
.v3-grid.cols-4, .v3-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v3-toolbar { gap: 8px; }
.v3-search { min-width: 0; flex: 1 1 200px; }
/* Users table becomes a stacked card list */
.v3-utr { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
.v3-uthead { display: none; }
.v3-utd::before {
content: attr(data-label);
display: inline-block;
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--ink-4); font-weight: 600; margin-right: 8px;
}
.v3-u-user::before { content: none; }
.v3-u-actions { justify-content: flex-start; }
.v3-inv-th { display: none; }
.v3-inv-tr { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
}
@media (max-width: 600px) {
.v3-content { padding: 16px 12px 60px; }
.v3-grid.cols-4, .v3-grid.cols-3, .v3-grid.cols-2 { grid-template-columns: 1fr; }
.v3-toolbar { flex-wrap: wrap; }
.v3-toolbar .spacer { display: none; }
.v3-search { width: 100%; min-width: 0; }
.v3-select-pill { flex: 1; min-width: 0; }
.v3-topbar { gap: 8px; padding: 8px 10px; }
.v3-topbar .user { width: 26px; height: 26px; font-size: 10px; }
.v3-design-toggle { display: none; }
.v3-card .v3-render { aspect-ratio: 16/10; }
.v3-card .actions { flex-wrap: wrap; }
.v3-card .actions .v3-btn { flex: 1 1 100%; }
.v3-seat-count .big { font-size: 32px; }
.v3-tabs { overflow-x: auto; flex-wrap: nowrap; }
.v3-tab { white-space: nowrap; }
.v3-pager { flex-direction: column; gap: 10px; align-items: center; }
}
/* Viewport safe-area (iPhone notch) */
.v3-app { padding-bottom: env(safe-area-inset-bottom); }
/* The V3 shell uses an inner scroll container (.v3-main). The sidebar and topbar
stay fixed; only the content area scrolls. No body-level scroll override needed. */
/* ========================================================================
V3 Configurator — scoped under .v3-cfg-root
======================================================================== */
.v3-cfg-root .v3-cfg-main {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Minimal colored-wash topbar */
.v3-cfg-root .v3-cfg-topbar {
display: flex; align-items: center; gap: 14px;
padding: 10px 20px;
background: linear-gradient(90deg, var(--teal-50) 0%, var(--surface) 35%, var(--amber-50) 100%);
border-bottom: 1px solid var(--line);
flex: none;
min-height: 56px;
}
.v3-cfg-root .v3-cfg-topbar .back-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--ink-3); background: transparent; border: 0; padding: 4px 6px; border-radius: 6px;
}
.v3-cfg-root .v3-cfg-topbar .back-link:hover { color: var(--teal-800); background: var(--teal-50); }
.v3-cfg-root .v3-cfg-topbar .sb-div { width: 1px; height: 18px; background: var(--line); }
.v3-cfg-root .v3-cfg-topbar .crumb { color: var(--ink-3); font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.v3-cfg-root .v3-cfg-topbar .crumb b { color: var(--ink); font-weight: 500; }
.v3-cfg-root .v3-cfg-topbar .crumb b.accent { color: var(--teal-800); }
.v3-cfg-root .tree-show-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
font-size: 12px; font-weight: 500;
color: var(--teal-800); background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 6px;
cursor: pointer; flex: none;
}
.v3-cfg-root .tree-show-btn:hover { background: var(--teal-100); }
.v3-cfg-root .v3-cfg-subbar .sb-title .tree-show-btn { margin-right: 4px; }
.v3-cfg-root .v3-cfg-topbar .spacer { flex: 1; }
/* Subbar */
.v3-cfg-root .v3-cfg-subbar {
display: flex; align-items: center; gap: 14px;
padding: 10px 20px;
background: var(--surface); border-bottom: 1px solid var(--line);
flex: none; min-height: 49px;
}
.v3-cfg-root .v3-cfg-subbar .sb-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.v3-cfg-root .v3-cfg-subbar .sb-title h1 {
margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.v3-cfg-root .v3-cfg-subbar .sb-title .mono { font-family: var(--mono); color: var(--ink-4); font-size: 11.5px; }
.v3-cfg-root .v3-cfg-subbar .sb-title .rev {
display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--green);
background: var(--green-50); padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.v3-cfg-root .v3-cfg-subbar .sb-title .rev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v3-cfg-root .v3-cfg-subbar .sb-meta { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-cfg-root .v3-cfg-subbar .sb-meta .dot { margin: 0 8px; color: var(--ink-4); }
.v3-cfg-root .v3-cfg-subbar .sb-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.v3-cfg-root .v3-cfg-subbar .sb-actions .sb-div { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.v3-cfg-root .v3-cfg-subbar .sb-actions .v3-btn.danger { color: var(--red); }
/* Workspace: tree | canvas | rrail */
.v3-cfg-root .v3-cfg-workspace {
display: grid;
grid-template-columns: var(--tree-w, 248px) minmax(0, 1fr) var(--rail-w, 460px);
flex: 1; min-height: 0;
transition: grid-template-columns 220ms ease;
}
.v3-cfg-root .v3-cfg-workspace > .v3-cfg-tree { grid-column: 1; }
.v3-cfg-root .v3-cfg-workspace > .v3-cfg-canvas { grid-column: 2; }
.v3-cfg-root .v3-cfg-workspace > .v3-cfg-rrail { grid-column: 3; }
.v3-cfg-root .v3-cfg-workspace[data-tree="collapsed"] { grid-template-columns: 0 minmax(0, 1fr) var(--rail-w, 460px); }
.v3-cfg-root .v3-cfg-workspace[data-tree="collapsed"] .v3-cfg-tree { display: none; }
.v3-cfg-root .v3-cfg-workspace[data-right="expanded-rail"] { grid-template-columns: 0 0 1fr; }
.v3-cfg-root .v3-cfg-workspace[data-right="expanded-rail"] .v3-cfg-tree { display: none; }
.v3-cfg-root .v3-cfg-workspace[data-right="expanded-rail"] .v3-cfg-canvas { visibility: hidden; overflow: hidden; }
/* Tree hide button */
.v3-cfg-root .v3-cfg-tree .tree-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.v3-cfg-root .v3-cfg-tree .tree-hide-btn { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color: var(--ink-4); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.v3-cfg-root .v3-cfg-tree .tree-hide-btn:hover { background: var(--surf-2); color: var(--ink-2); }
/* Tree */
.v3-cfg-root .v3-cfg-tree {
background: var(--surface); border-right: 1px solid var(--line);
padding: 18px 14px 18px 18px; overflow-y: auto; min-width: 0;
}
.v3-cfg-root .tree-h { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 12px; font-weight: 600; font-family: var(--mono); }
.v3-cfg-root .progress-bar { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; margin-bottom: 16px; }
.v3-cfg-root .progress-fill { height: 100%; background: var(--teal-800); transition: width 300ms; }
.v3-cfg-root[data-theme="dark"] .progress-fill { background: var(--teal-100); }
.v3-cfg-root .tree-group { margin-bottom: 14px; }
.v3-cfg-root .tree-group-h { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; font-size: 12px; color: var(--ink-3); font-weight: 600; cursor: pointer; }
.v3-cfg-root .tree-group-h .idx {
width: 20px; height: 20px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800);
font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; font-family: var(--mono);
}
.v3-cfg-root .tree-group.current .tree-group-h .idx { background: var(--teal-800); color: #fff; box-shadow: 0 0 0 4px var(--teal-50); }
.v3-cfg-root .tree-group-h .name { color: var(--ink-2); flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-cfg-root .tree-node {
position: relative; display: flex; align-items: center; gap: 10px;
padding: 6px 10px 6px 28px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.v3-cfg-root .tree-node::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.v3-cfg-root .tree-node::after { content: ""; position: absolute; left: 9px; top: 14px; width: 10px; height: 1px; background: var(--line); }
.v3-cfg-root .tree-node:hover { background: var(--teal-50); color: var(--teal-800); }
.v3-cfg-root .tree-node.active { background: var(--teal-100); color: var(--teal-800); font-weight: 500; }
.v3-cfg-root .tree-node .num { font-family: var(--mono); font-size: 11px; color: var(--ink-4); min-width: 28px; }
.v3-cfg-root .tree-node.active .num { color: var(--teal-800); }
.v3-cfg-root .tree-node .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.v3-cfg-root .tree-node .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); flex: none; margin-left: auto; }
.v3-cfg-root .tree-node.done .dot { background: var(--green); }
.v3-cfg-root .tree-node.partial .dot { background: var(--amber); }
.v3-cfg-root .tree-node.current .dot { background: var(--teal-800); box-shadow: 0 0 0 3px var(--teal-100); }
/* Canvas */
.v3-cfg-root .v3-cfg-canvas { padding: 22px 28px 24px; overflow-y: auto; min-width: 0; }
.v3-cfg-root .canvas-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.v3-cfg-root .canvas-h h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.v3-cfg-root .canvas-h .num { font-family: var(--mono); color: var(--ink-4); font-size: 14px; }
.v3-cfg-root .canvas-sub { color: var(--ink-3); font-size: 13.5px; margin: 0 0 18px; }
/* Section card */
.v3-cfg-root .section-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow);
border-left: 3px solid var(--teal-800);
}
.v3-cfg-root .section-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, var(--teal-50), var(--surface));
}
.v3-cfg-root .section-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
.v3-cfg-root .section-head h3 .num { font-family: var(--mono); color: var(--ink-4); font-size: 12px; }
.v3-cfg-root .section-head .count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); background: var(--bg); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-soft); }
.v3-cfg-root .section-head .col-picker { display: inline-flex; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin-left: auto; }
.v3-cfg-root .section-head .col-picker button { padding: 3px 8px; border: 0; background: transparent; color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); border-radius: 5px; cursor: pointer; }
.v3-cfg-root .section-head .col-picker button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.v3-cfg-root .section-body { padding: 18px; display: grid; gap: 16px 20px; }
.v3-cfg-root .section-body[data-cols="1"] { grid-template-columns: 1fr; }
.v3-cfg-root .section-body[data-cols="2"] { grid-template-columns: 1fr 1fr; }
.v3-cfg-root .section-body[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.v3-cfg-root .section-body[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
/* Fields */
.v3-cfg-root .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3-cfg-root .field-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.v3-cfg-root .field-h > .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.v3-cfg-root .field-h .info-btn { width: 16px; height: 16px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-4); padding: 0; border-radius: 3px; cursor: pointer; }
.v3-cfg-root .field-h .info-btn:hover { color: var(--teal-800); background: var(--teal-50); }
.v3-cfg-root .field-h .lock { margin-left: auto; color: var(--ink-4); display: inline-flex; }
.v3-cfg-root .field-h .lock.on { color: var(--amber); }
.v3-cfg-root .field-input {
display: flex; align-items: stretch;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
overflow: hidden;
}
.v3-cfg-root .field-input input,
.v3-cfg-root .field-input select {
width: 100%; background: transparent; border: 0; outline: 0;
padding: 8px 10px; font-size: 13.5px; min-width: 0; color: var(--ink);
}
.v3-cfg-root .field-input select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center; padding-right: 26px;
}
.v3-cfg-root .field-input:focus-within { border-color: var(--teal-800); box-shadow: 0 0 0 3px var(--teal-50); }
.v3-cfg-root .field-input.committed { border-color: var(--green); }
.v3-cfg-root .field-input.committed::before { content: ""; width: 3px; background: var(--green); }
.v3-cfg-root .field-input.readonly { opacity: 0.75; background: var(--bg); }
.v3-cfg-root .field-help { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.v3-cfg-root .field-error { font-size: 11px; color: var(--red); }
/* Toggle */
.v3-cfg-root .toggle { position: relative; width: 40px; height: 22px; background: var(--line); border-radius: 999px; border: 0; padding: 0; transition: background 160ms; cursor: pointer; flex: none; }
.v3-cfg-root .toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 160ms; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.v3-cfg-root .toggle.on { background: var(--teal-800); }
.v3-cfg-root .toggle.on::after { transform: translateX(18px); }
/* Action bar */
.v3-cfg-root .v3-cfg-action-bar {
background: var(--surface); border-top: 1px solid var(--line);
padding: 10px 28px; display: flex; align-items: center; gap: 10px;
flex: none;
}
.v3-cfg-root .v3-cfg-action-bar .spacer { flex: 1; }
.v3-cfg-root .v3-cfg-action-bar .info { color: var(--ink-3); font-size: 12.5px; }
/* Right rail */
.v3-cfg-root .v3-cfg-rrail {
background: var(--surface); border-left: 1px solid var(--line);
display: flex; flex-direction: column; min-width: 0; overflow: hidden;
}
/* Folder-style tabs: the active tab sits proud of the tab bar with rounded
top corners and "cuts" the bottom border so it visually belongs to the
content below. Inactive tabs are flush with the bar. */
.v3-cfg-root .rrail-tabs {
display: flex; align-items: flex-end; gap: 2px;
padding: 8px 10px 0; background: var(--bg);
border-bottom: 1px solid var(--line);
flex: none;
}
.v3-cfg-root .rrail-tabs button {
position: relative;
padding: 8px 14px 9px; margin-bottom: -1px;
background: transparent; border: 1px solid transparent;
border-bottom-color: transparent;
font-size: 12.5px; color: var(--ink-3);
border-radius: 8px 8px 0 0;
cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms;
display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
}
.v3-cfg-root .rrail-tabs button .icon { width: 14px; height: 14px; }
.v3-cfg-root .rrail-tabs button:hover { color: var(--ink); background: rgba(0, 0, 0, 0.03); }
.v3-cfg-root .rrail-tabs button.on {
color: var(--teal-800);
background: var(--surface);
border-color: var(--line);
border-bottom-color: var(--surface);
}
.v3-cfg-root .rrail-tabs button.on:hover { background: var(--surface); }
.v3-cfg-root .rrail-tabs .rt-spacer { flex: 1; }
.v3-cfg-root .rrail-tabs .rt-expand {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0; margin: 0;
border-radius: 6px; border: 1px solid var(--line);
color: var(--ink-3); background: var(--bg); cursor: pointer;
transition: background 120ms, color 120ms, border-color 120ms;
}
.v3-cfg-root .rrail-tabs .rt-expand:hover { color: var(--teal-800); border-color: var(--teal-800); background: var(--surface); }
/* Pill on/off switch used for "Committed only". Makes the toggle obviously
pressable — a plain checkbox reads as static text next to the heading. */
.v3-cfg-root .v3-switch {
display: inline-flex; align-items: center; gap: 8px;
padding: 3px 10px 3px 4px; background: var(--bg);
border: 1px solid var(--line); border-radius: 999px;
color: var(--ink-3); font-size: 11.5px; font-weight: 500;
cursor: pointer; user-select: none;
transition: border-color 120ms, color 120ms, background 120ms;
}
.v3-cfg-root .v3-switch:hover { border-color: var(--teal-600, var(--teal-800)); color: var(--ink); }
.v3-cfg-root .v3-switch-track {
position: relative; display: inline-block;
width: 26px; height: 14px; border-radius: 999px;
background: var(--line); transition: background 140ms;
flex: none;
}
.v3-cfg-root .v3-switch-thumb {
position: absolute; top: 1px; left: 1px;
width: 12px; height: 12px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 140ms;
}
.v3-cfg-root .v3-switch.on { background: rgba(20, 170, 170, 0.12); border-color: var(--teal-800); color: var(--ink); }
.v3-cfg-root .v3-switch.on .v3-switch-track { background: var(--teal-800); }
.v3-cfg-root .v3-switch.on .v3-switch-thumb { transform: translateX(12px); }
.v3-cfg-root .v3-switch-label { line-height: 1; }
.v3-cfg-root .rrail-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; min-height: 0; }
/* Docs tab: fill the rail, let the iframe take remaining height so only
the PDF viewer scrolls (not the rrail-body). */
.v3-cfg-root .rrail-body > .docs-tab { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.v3-cfg-root .docs-tab .docs-pdf { flex: 1; min-height: 240px; }
.v3-cfg-root .docs-tab .docs-pdf > iframe { width: 100%; height: 100%; display: block; border: 0; }
.v3-cfg-root .result-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.v3-cfg-root .result-h h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); }
.v3-cfg-root .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: v3cfgPulse 2.2s ease-in-out infinite; }
@keyframes v3cfgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.v3-cfg-root .preview-3d {
aspect-ratio: 4/3;
background:
linear-gradient(var(--line-soft) 1px, transparent 1px) 0 0 / 14px 14px,
linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 14px 14px,
var(--bg);
border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; position: relative;
display: grid; place-items: center; overflow: hidden; min-height: 220px;
}
.v3-cfg-root .preview-3d .corner { position: absolute; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.v3-cfg-root .preview-3d .corner.tl { top: 8px; left: 10px; }
.v3-cfg-root .preview-3d .corner.br { bottom: 8px; right: 10px; }
.v3-cfg-root .warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12px; margin-bottom: 6px; }
.v3-cfg-root .warn.warn-amber { background: var(--amber-50); color: var(--amber); }
.v3-cfg-root .warn.warn-error { background: var(--red-50); color: var(--red); }
.v3-cfg-root .warn.warn-ok { background: var(--green-50); color: var(--green); }
.v3-cfg-root .result-block { margin-bottom: 14px; }
.v3-cfg-root .result-block h4 {
margin: 0 0 8px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-4); font-family: var(--mono); display: flex; align-items: center; gap: 8px;
}
.v3-cfg-root .result-block h4::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.v3-cfg-root .coming-soon {
border: 1px dashed var(--line); border-radius: var(--r-md);
padding: 28px 18px; text-align: center; color: var(--ink-3); font-size: 13px;
background: var(--bg);
}
.v3-cfg-root .coming-soon h4 { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; }
/* Loading & empty states */
.v3-cfg-root .v3-cfg-loading, .v3-cfg-root .v3-cfg-empty {
flex: 1; display: grid; place-items: center; color: var(--ink-3); font-size: 14px;
}
/* Fade in */
@keyframes v3cfgFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v3-cfg-root .fade-in > * { animation: v3cfgFade 300ms ease both; }
.v3-cfg-root .fade-in > *:nth-child(2) { animation-delay: 60ms; }
.v3-cfg-root .fade-in > *:nth-child(3) { animation-delay: 120ms; }
.v3-cfg-root .fade-in > *:nth-child(4) { animation-delay: 180ms; }
/* Right-rail Result tab: parameter table */
.v3-cfg-root .rrail-body .result-block-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.v3-cfg-root .rrail-body .result-block-h h4 { margin: 0; }
/* Docs tab */
.v3-cfg-root .docs-tab .docs-head { display: flex; align-items: flex-start; gap: 12px; }
.v3-cfg-root .docs-tab .docs-title { flex: 1; min-width: 0; }
.v3-cfg-root .docs-tab .docs-title h4 { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ink); }
.v3-cfg-root .docs-tab .docs-title .sub { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.v3-cfg-root .docs-tab .docs-pdf { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.v3-cfg-root .docs-tab .docs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.v3-cfg-root .docs-tab .docs-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; }
.v3-cfg-root .docs-tab .docs-chip:hover { border-color: var(--teal-600); color: var(--ink); }
.v3-cfg-root .docs-tab .docs-chip.on { background: rgba(20, 170, 170, 0.12); border-color: var(--teal-800); color: var(--ink); }
.v3-cfg-root .docs-tab .docs-chip-ic { font-size: 13px; line-height: 1; }
.v3-cfg-root .docs-tab .docs-chip-name { font-weight: 500; }
.v3-cfg-root .docs-tab .docs-chip-size { font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.v3-cfg-root .result-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: 11.5px; cursor: pointer; user-select: none; }
.v3-cfg-root .result-toggle input { accent-color: var(--teal-800); }
.v3-cfg-root .result-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.v3-cfg-root .result-table thead th { text-align: left; font-weight: 600; color: var(--ink-4); text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.05em; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; }
.v3-cfg-root .result-table th.ok, .v3-cfg-root .result-table td.ok { width: 24px; text-align: center; color: var(--green); }
.v3-cfg-root .result-table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-cfg-root .result-table tbody tr.committed { background: color-mix(in srgb, var(--green-50) 50%, transparent); }
.v3-cfg-root .result-table td.grp { color: var(--ink-4); font-size: 11px; }
.v3-cfg-root .result-table td.val { color: var(--ink); }
/* Modal */
.v3-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 14, 16, 0.42); display: grid; place-items: center; z-index: 1000; animation: v3modalFade 140ms ease-out; }
.v3-modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,0.25); max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; animation: v3modalSlide 160ms ease-out; }
.v3-modal-card.sm { width: 360px; }
.v3-modal-card.md { width: 480px; }
.v3-modal-card.lg { width: 680px; }
.v3-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; }
.v3-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.v3-modal-close { background: transparent; border: 0; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.v3-modal-close:hover { background: var(--surf-2); color: var(--ink); }
.v3-modal-body { padding: 18px; overflow-y: auto; }
.v3-modal-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: var(--bg); flex: none; }
@keyframes v3modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v3modalSlide { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Form helpers inside modals */
.v3-modal-card .v3-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.v3-modal-card .v3-field:last-child { margin-bottom: 0; }
.v3-modal-card .v3-field label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.v3-modal-card .v3-field .hint { color: var(--ink-4); font-size: 11.5px; margin: 0; }
.v3-modal-card .v3-field input[type="text"],
.v3-modal-card .v3-field input[type="number"],
.v3-modal-card .v3-field textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; color: var(--ink); background: var(--surface); outline: none; font-family: inherit; }
.v3-modal-card .v3-field input:focus, .v3-modal-card .v3-field textarea:focus { border-color: var(--teal-800); box-shadow: 0 0 0 3px var(--teal-50); }
.v3-modal-card .v3-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.v3-modal-card .v3-kv { display: flex; flex-direction: column; gap: 2px; }
.v3-modal-card .v3-kv .k { color: var(--ink-4); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.v3-modal-card .v3-kv .v { color: var(--ink-2); font-size: 13px; word-break: break-word; }
/* Lock button */
.v3-cfg-root .field .lock { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; color: var(--ink-4); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms, color 120ms, border-color 120ms; }
.v3-cfg-root .field .lock:hover:not(:disabled) { background: var(--surf-2); color: var(--ink-2); }
.v3-cfg-root .field .lock.on { background: var(--green-50); border-color: var(--green-2, #3f8f5c); color: var(--green-2, #3f8f5c); }
.v3-cfg-root .field .lock:disabled { opacity: 0.45; cursor: not-allowed; }
/* Placeholder pages: a centred card with an icon, title, description and
"Coming soon" tag. Used by every V3 route that's still stubbed. */
.v3-placeholder { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.v3-placeholder-card { max-width: 480px; width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 32px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); }
.v3-placeholder-ic { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; background: rgba(20, 170, 170, 0.08); color: var(--teal-800); display: inline-flex; align-items: center; justify-content: center; }
.v3-placeholder-ic .icon { width: 26px; height: 26px; }
.v3-placeholder-card h1 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.v3-placeholder-card p { margin: 0 auto 18px; max-width: 360px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.v3-placeholder-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-800); background: rgba(20, 170, 170, 0.1); border-radius: 999px; }
/* =========================================================================
Help & Support landing page (HelpAndSupport.razor)
Look: hero with gradient + soft illustration, quick-action cards, two-
column layout with tickets on the left and an SLA / status / contact
side rail on the right, then a popular-articles grid. Static demo —
every interactive element is non-wired.
========================================================================= */
.hs-hero {
position: relative;
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: center;
padding: 30px 32px;
border-radius: 18px;
margin-bottom: 18px;
overflow: hidden;
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--teal-800) 16%, var(--surface)) 0%, var(--teal-50) 55%, var(--surface) 100%);
border: 1px solid color-mix(in oklab, var(--teal-800) 14%, var(--line));
}
.hs-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(color-mix(in oklab, var(--teal-800) 8%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
linear-gradient(90deg, color-mix(in oklab, var(--teal-800) 8%, transparent) 1px, transparent 1px) 0 0 / 22px 22px;
mask-image: radial-gradient(110% 90% at 20% 20%, #000 30%, transparent 75%);
opacity: 0.35;
}
.hs-hero-ink { position: relative; z-index: 1; min-width: 0; }
.hs-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.6); color: var(--teal-800); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid color-mix(in oklab, var(--teal-800) 14%, transparent); }
.v3-app[data-theme="dark"] .hs-eyebrow { background: rgba(255,255,255,0.06); }
.hs-hero h1 { margin: 10px 0 6px; font-size: 30px; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.hs-hero .hs-lead { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; max-width: 620px; }
.hs-hero .hs-lead b { color: var(--ink); font-weight: 600; }
.hs-search { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; max-width: 640px; box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(11,42,54,0.12); }
.hs-search .ic { color: var(--ink-3); display: inline-flex; }
.hs-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); padding: 8px 0; }
.hs-search .v3-btn-primary { height: 34px; padding: 0 16px; }
.hs-qtags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.hs-qtags .lbl { color: var(--ink-3); font-size: 12px; margin-right: 4px; }
.hs-qtags .tag { font-size: 12px; color: var(--teal-800); background: rgba(255,255,255,0.6); border: 1px solid color-mix(in oklab, var(--teal-800) 14%, transparent); padding: 4px 9px; border-radius: 999px; cursor: pointer; transition: background 120ms; }
.hs-qtags .tag:hover { background: var(--surface); }
.v3-app[data-theme="dark"] .hs-qtags .tag { background: rgba(255,255,255,0.04); }
.hs-hero-art { position: relative; z-index: 1; color: var(--teal-800); opacity: 0.9; }
.hs-hero-art svg { width: 100%; height: auto; max-height: 200px; }
@media (max-width: 900px) {
.hs-hero { grid-template-columns: 1fr; }
.hs-hero-art { display: none; }
}
/* ---------- Quick action grid ---------- */
.hs-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.hs-quick.hs-quick-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .hs-quick, .hs-quick.hs-quick-3 { grid-template-columns: repeat(2, 1fr); } }
.hs-quick-card {
display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
cursor: pointer; transition: transform 120ms, box-shadow 120ms, border-color 120ms;
text-decoration: none; color: inherit;
}
.hs-quick-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(11,42,54,0.25); border-color: color-mix(in oklab, var(--teal-800) 22%, var(--line)); }
.hs-quick-card .ic { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.hs-quick-card .ic .icon { width: 20px; height: 20px; }
.hs-quick-card .t { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.hs-quick-card .s { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.hs-quick-card .arr { color: var(--ink-4); }
.hs-quick-card:hover .arr { color: var(--teal-800); transform: translateX(2px); transition: all 160ms; }
.hs-quick-card.accent-teal .ic { background: rgba(17, 61, 79, 0.10); color: var(--teal-800); }
.hs-quick-card.accent-amber .ic { background: var(--amber-50); color: var(--amber); }
.hs-quick-card.accent-purple .ic { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.hs-quick-card.accent-green .ic { background: rgba(22, 163, 74, 0.10); color: #16a34a; }
.live-dot, .ok-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.live-dot { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
.ok-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
/* Inline "Coming soon" tag used in quick-action card titles + side-rail
card headers. Two sizes: default fits next to a 14-px title, -lg for a
standalone header pill. The .is-soon modifier also softens the parent
card so it reads as non-interactive. */
.soon-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--teal-800) 10%, var(--surface)); color: var(--teal-800); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; border: 1px solid color-mix(in oklab, var(--teal-800) 14%, transparent); }
.soon-tag-lg { margin: 0; padding: 3px 10px; font-size: 10.5px; }
.hs-quick-card.is-soon { opacity: 0.82; cursor: default; }
.hs-quick-card.is-soon:hover { transform: none; box-shadow: none; border-color: var(--line); }
.hs-quick-card.is-soon .arr { display: none; }
.hs-card.is-soon { background: color-mix(in oklab, var(--teal-50) 35%, var(--surface)); border-style: dashed; }
.hs-status-list.preview li { opacity: 0.55; }
.hs-status-note { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
/* ---------- Main two-column ---------- */
.hs-main { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .hs-main { grid-template-columns: 1fr; } }
.hs-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.hs-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hs-card-head.tight { margin-bottom: 10px; }
.hs-card-head > div:first-child { flex: 1; min-width: 0; }
.hs-card-head h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.hs-card-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.hs-card-head .sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
/* ---------- Tabs ---------- */
.hs-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.hs-tabs > button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--ink-3); border-radius: 8px; cursor: pointer; }
.hs-tabs > button:hover { background: var(--teal-50); color: var(--teal-800); }
.hs-tabs > button.on { background: var(--teal-100); color: var(--teal-800); font-weight: 600; }
.hs-tabs > button .num { font-size: 11px; background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 999px; color: var(--ink-2); }
.v3-app[data-theme="dark"] .hs-tabs > button .num { background: rgba(255,255,255,0.08); }
.hs-tabs > button.on .num { background: rgba(255,255,255,0.6); color: var(--teal-800); }
.hs-tabs .spacer { flex: 1; }
.hs-tabs .v3-search.sm { width: 220px; }
.hs-tabs .v3-search.sm input { padding: 4px 0; }
/* ---------- Scope segmented control (admin: My tenant / All tenants) ---------- */
.hs-scope {
display: inline-flex; gap: 2px;
padding: 3px;
background: var(--teal-50);
border: 1px solid var(--teal-100);
border-radius: 10px;
margin: 4px 0 10px 0;
}
.hs-scope button {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: transparent;
border: 0; border-radius: 7px;
font-size: 12.5px; font-weight: 500;
color: var(--ink-2); cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.hs-scope button svg { width: 14px; height: 14px; }
.hs-scope button:hover { color: var(--ink); }
.hs-scope button.on {
background: var(--surface);
color: var(--teal-800);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.hs-scope .scope-badge {
font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 1px 5px; border-radius: 4px;
background: color-mix(in oklab, var(--amber) 18%, transparent);
color: var(--amber);
font-weight: 700;
}
/* ---------- Ticket table ---------- */
.hs-ticket-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.hs-ticket-table .row { display: grid; grid-template-columns: 90px 1fr 160px 110px 130px 140px 80px; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); align-items: center; }
/* Cross-tenant view inserts a Tenant column between Subject and Requester. */
.hs-ticket-table.with-tenant .row { grid-template-columns: 82px 1fr 140px 150px 100px 120px 130px 76px; }
.hs-ticket-table .col.tenant { font-size: 12px; min-width: 0; }
.hs-ticket-table .col.tenant .tenant-pill {
display: inline-block; max-width: 100%;
padding: 2px 8px; border-radius: 6px;
background: var(--teal-50); color: var(--teal-800);
border: 1px solid var(--teal-100);
font-size: 11.5px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-ticket-table .row:first-child { border-top: 0; }
.hs-ticket-table .row.head { background: var(--teal-50); padding: 8px 14px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.hs-ticket-table .row:not(.head):hover { background: color-mix(in oklab, var(--teal-50) 60%, var(--surface)); }
.hs-ticket-table .col.id { color: var(--ink-3); font-size: 12px; }
.hs-ticket-table .col.sub .t { font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.hs-ticket-table .col.sub .m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.hs-ticket-table .col.sub .tag { background: var(--teal-50); color: var(--teal-800); padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }
.hs-ticket-table .col.sub .dot { color: var(--ink-4); }
.hs-ticket-table .col.sub .msgs, .hs-ticket-table .col.sub .att { display: inline-flex; align-items: center; gap: 3px; }
.hs-ticket-table .col.who { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.hs-ticket-table .col.who .av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--teal-100); color: var(--teal-800); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }
.hs-ticket-table .col.who .n { color: var(--ink); font-weight: 500; line-height: 1.1; }
.hs-ticket-table .col.who .e { color: var(--ink-4); font-size: 11px; line-height: 1.2; }
.hs-ticket-table .col.upd { font-size: 12px; color: var(--ink-2); }
.hs-ticket-table .col.upd .sub { font-size: 11px; color: var(--ink-4); }
.prio-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; }
.prio-pill.p-urgent { background: rgba(220, 38, 38, 0.10); color: #b91c1c; border-color: rgba(220, 38, 38, 0.2); }
.prio-pill.p-high { background: rgba(234, 88, 12, 0.10); color: #c2410c; border-color: rgba(234, 88, 12, 0.2); }
.prio-pill.p-med { background: var(--amber-50); color: var(--amber); border-color: color-mix(in oklab, var(--amber) 30%, transparent); }
.prio-pill.p-low { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-100); }
.st-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
.st-pill.s-open { background: rgba(59, 130, 246, 0.10); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.22); }
.st-pill.s-progress { background: rgba(124, 58, 237, 0.10); color: #6d28d9; border-color: rgba(124, 58, 237, 0.22); }
.st-pill.s-pending { background: var(--amber-50); color: var(--amber); border-color: color-mix(in oklab, var(--amber) 30%, transparent); }
.st-pill.s-resolved { background: rgba(22, 163, 74, 0.10); color: #15803d; border-color: rgba(22, 163, 74, 0.22); }
.st-pill.s-closed { background: rgba(0,0,0,0.05); color: var(--ink-2); border-color: var(--line); }
.v3-app[data-theme="dark"] .st-pill.s-closed { background: rgba(255,255,255,0.06); }
.hs-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.hs-card-foot .spacer { flex: 1; }
/* ---------- KB grid ---------- */
.hs-kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .hs-kb-grid { grid-template-columns: 1fr; } }
.hs-kb { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; transition: border-color 120ms, background 120ms; text-decoration: none; color: inherit; }
.hs-kb:hover { border-color: color-mix(in oklab, var(--teal-800) 22%, var(--line)); background: var(--teal-50); }
.hs-kb .kb-ic { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.hs-kb .kb-ic.teal { background: rgba(17, 61, 79, 0.10); color: var(--teal-800); }
.hs-kb .kb-ic.amber { background: var(--amber-50); color: var(--amber); }
.hs-kb .kb-ic.purple { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.hs-kb .kb-body .t { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.hs-kb .kb-body .s { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; line-height: 1.45; }
.hs-kb .kb-body .meta { display: flex; gap: 12px; font-size: 11px; color: var(--ink-4); }
.hs-kb .kb-body .meta span { display: inline-flex; align-items: center; gap: 4px; }
.hs-kb .kb-body .meta .star-filled { color: var(--amber); }
/* ---------- Side rail cards ---------- */
.hs-col-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 82px; }
@media (max-width: 1080px) { .hs-col-side { position: static; } }
.hs-sla .hs-sla-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hs-sla .hs-sla-head .t { font-size: 13px; color: var(--ink-3); }
.hs-sla .plan-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--teal-800), var(--teal-700)); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.hs-sla-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hs-sla-grid .kv { padding: 10px; background: var(--teal-50); border-radius: 10px; }
.hs-sla-grid .k { font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.hs-sla-grid .v { display: flex; align-items: baseline; gap: 6px; }
.hs-sla-grid .v b { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.hs-sla-grid .mini { font-size: 10.5px; color: var(--ink-4); }
.hs-sla-grid .mini.up { color: #15803d; font-weight: 600; }
.hs-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hs-status-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); padding: 4px 0; }
.hs-status-list li em { font-style: normal; color: var(--ink-3); margin-right: auto; }
.hs-status-list li .ms { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.hs-status-list .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.hs-status-list .dot.ok { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16); }
.hs-status-list .dot.warn { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 25%, transparent); }
.hs-status-list .dot.down { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16); }
.hs-status-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--teal-800); margin-top: 10px; cursor: pointer; font-weight: 500; }
.hs-status-link:hover { text-decoration: underline; }
.hs-contact h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hs-contact .contact-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; text-decoration: none; color: inherit; }
.hs-contact .contact-row:hover { background: var(--teal-50); }
.hs-contact .contact-row .ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.hs-contact .contact-row .ic.teal { background: rgba(17, 61, 79, 0.10); color: var(--teal-800); }
.hs-contact .contact-row .ic.amber { background: var(--amber-50); color: var(--amber); }
.hs-contact .contact-row .ic.purple { background: rgba(124, 58, 237, 0.10); color: #7c3aed; }
.hs-contact .contact-row .t { font-size: 13px; font-weight: 600; color: var(--ink); }
.hs-contact .contact-row .s { font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 5px; }
.hs-contact .contact-row .arr { color: var(--ink-4); }
.hs-contact .contact-row:hover .arr { color: var(--teal-800); }
/* =============================================================
V3 Support Dialogs — V3CreateTicket + V3TicketDetail
============================================================= */
/* ---------- Create ticket ----------
The .v3-ct element IS the modal card — no V3Modal wrapper. Parent
renders us inside a `.v3-modal-backdrop`; we provide the card chrome
(width, border, shadow, max-height, scrollable body). This keeps the
markup flat and lets us own the header/body/footer layout cleanly. */
.v3-ct {
display: flex; flex-direction: column;
background: var(--surface);
width: min(720px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
overflow: hidden;
animation: v3modalSlide 160ms ease-out;
}
.v3-ct-head { padding: 22px 26px 14px; border-bottom: 1px solid var(--line); flex: none; }
.v3-ct-head .eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--teal-800); font-weight: 700; margin-bottom: 6px;
}
.v3-ct-head h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.v3-ct-head .sub { font-size: 13px; color: var(--ink-3); margin: 0; }
.v3-ct-body { padding: 20px 26px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.v3-ct-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
@media (max-width: 720px) { .v3-ct-grid { grid-template-columns: 1fr; } }
.v3-ct .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v3-ct .field label {
font-size: 12px; font-weight: 600; color: var(--ink-2);
letter-spacing: 0.02em;
}
.v3-ct .field label .req { color: #b91c1c; margin-left: 2px; }
.v3-ct .hint {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--ink-4); margin-top: 2px;
}
.v3-ct .hint .spacer { flex: 1; }
.v3-ct .hint .count { font-variant-numeric: tabular-nums; }
.v3-ct .hint .err { color: #b91c1c; font-weight: 500; }
/* Input primitives used by both dialogs */
.v3-input {
width: 100%;
padding: 9px 12px;
font-size: 13.5px; color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
font-family: inherit;
}
.v3-input:focus {
border-color: var(--teal-700);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-700) 18%, transparent);
}
.v3-input.sm { padding: 5px 8px; font-size: 12.5px; }
textarea.v3-input { line-height: 1.5; resize: vertical; min-height: 72px; }
.v3-select-wrap { position: relative; }
.v3-select-wrap select.v3-input { appearance: none; padding-right: 30px; }
.v3-select-wrap .chev {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
color: var(--ink-3); pointer-events: none;
}
/* Priority segmented picker */
.v3-ct-prio { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-ct-prio .prio-opt {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 12.5px; font-weight: 500; color: var(--ink-2);
cursor: pointer;
transition: border-color 120ms ease, background 120ms ease;
}
.v3-ct-prio .prio-opt .dot {
width: 8px; height: 8px; border-radius: 50%;
background: currentColor; opacity: 0.55;
}
.v3-ct-prio .prio-opt.p-urgent { color: #b91c1c; }
.v3-ct-prio .prio-opt.p-high { color: #c2410c; }
.v3-ct-prio .prio-opt.p-med { color: var(--amber); }
.v3-ct-prio .prio-opt.p-low { color: var(--teal-800); }
.v3-ct-prio .prio-opt:hover { border-color: color-mix(in oklab, currentColor 40%, var(--line)); }
.v3-ct-prio .prio-opt.on {
background: color-mix(in oklab, currentColor 10%, var(--surface));
border-color: currentColor;
}
.v3-ct-prio .prio-opt.on .dot { opacity: 1; }
/* Attachment drop zone */
.v3-ct-drop {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: var(--teal-50);
border: 1px dashed color-mix(in oklab, var(--teal-700) 35%, var(--line));
border-radius: 10px;
cursor: pointer;
transition: background 120ms ease;
}
.v3-ct-drop:hover { background: color-mix(in oklab, var(--teal-50) 60%, var(--surface)); }
.v3-ct-drop .ic {
width: 36px; height: 36px; border-radius: 9px;
background: var(--surface); color: var(--teal-800);
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--teal-100);
}
.v3-ct-drop .t { font-size: 13px; font-weight: 600; color: var(--ink); }
.v3-ct-drop .s { font-size: 11.5px; color: var(--ink-3); }
.v3-ct-file-input { display: none; }
.v3-ct-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.v3-ct-thumbs .thumb {
position: relative; width: 84px; height: 84px;
border-radius: 8px; overflow: hidden;
border: 1px solid var(--line);
}
.v3-ct-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-ct-thumbs .thumb .rm {
position: absolute; top: 2px; right: 2px;
width: 20px; height: 20px; border-radius: 50%;
border: 0; background: rgba(15, 23, 42, 0.72); color: #fff;
font-size: 14px; line-height: 1;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
/* Use justify-content instead of a flex-1 spacer — simpler, and avoids
accidental collisions with any other `.spacer` rule that might have
`min-width` or `display: none` under a breakpoint. */
.v3-ct-foot {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 26px;
border-top: 1px solid var(--line);
background: var(--teal-50);
}
.v3-ct-submit { margin-left: auto; }
/* ---------- Ticket detail ---------- */
.v3-td-loading, .v3-td-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 60px 24px; color: var(--ink-3);
}
.v3-spinner {
width: 28px; height: 28px;
border: 3px solid var(--teal-100);
border-top-color: var(--teal-700);
border-radius: 50%; animation: v3-spin 0.8s linear infinite;
}
@keyframes v3-spin { to { transform: rotate(360deg); } }
/* .v3-td IS the modal card (same as .v3-ct above). .v3-td-shell is a
small variant we use for loading/empty states — it's a short card
that doesn't need the 1080px width. */
.v3-td {
display: flex; flex-direction: column;
background: var(--surface);
width: min(1080px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
overflow: hidden;
animation: v3modalSlide 160ms ease-out;
}
.v3-td.v3-td-shell { width: min(480px, calc(100vw - 32px)); }
.v3-td-head {
display: grid; grid-template-columns: 1fr auto; gap: 16px;
padding: 20px 26px 14px; border-bottom: 1px solid var(--line);
}
.v3-td-title .idline {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--ink-3);
}
.v3-td-title .idline .mono { font-family: ui-monospace, 'SF Mono', Consolas, monospace; color: var(--ink-2); }
.v3-td-title .idline .dot { color: var(--ink-4); }
.v3-td-title .idline .cat {
background: var(--teal-50); color: var(--teal-800);
padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
}
.v3-td-title .idline .tenant {
background: var(--amber-50); color: var(--amber);
padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
font-weight: 600;
}
.v3-td-title h2 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.v3-td-title .meta { font-size: 12px; color: var(--ink-3); }
.v3-td-pills { display: flex; align-items: center; gap: 8px; }
/* Scoped to the dialog-close × specifically — a bare .v3-btn-ghost already
exists globally (line ~218) for link-style ghost buttons, so we don't
redefine it here or we'd squash those into 30×30 squares. */
.v3-td-pills .v3-btn-close {
background: transparent; border: 0; color: var(--ink-3);
width: 30px; height: 30px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 16px;
}
.v3-td-pills .v3-btn-close:hover { background: var(--teal-50); color: var(--ink); }
/* Keep button labels on one line inside our dialogs — a narrow flex cell
would otherwise wrap "Close ticket" onto two lines. */
.v3-ct .v3-btn,
.v3-td .v3-btn { white-space: nowrap; }
.v3-td-main {
display: grid; grid-template-columns: 1fr 320px;
min-height: 0; flex: 1;
}
@media (max-width: 860px) { .v3-td-main { grid-template-columns: 1fr; } }
/* Thread (left) */
.v3-td-thread {
display: flex; flex-direction: column;
min-height: 0;
border-right: 1px solid var(--line);
/* Anchor for the floating "Jump to latest" pill. */
position: relative;
}
/* Floating "Jump to latest" pill — reuses .v3-btn.v3-btn-primary for
colour/typography so it stays on-theme (incl. dark-mode inversion).
This rule only handles placement, pill shape, shadow, and the
fade-in. Everything else comes from the base button styles. */
.v3-td-jump.v3-btn.v3-btn-primary,
.v3-td-jump.v3-btn.v3-btn-primary:hover {
position: absolute;
left: 50%;
bottom: 92px; /* clears the composer height + a little air */
transform: translateX(-50%);
width: auto; /* beat the flex-item stretch from .v3-td-thread */
border-radius: 999px;
padding: 6px 14px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
z-index: 5;
animation: v3-td-jump-in 160ms ease-out;
}
.v3-td-jump.v3-btn:active { transform: translate(-50%, 1px); }
.v3-td-jump .icon { width: 12px; height: 12px; }
@keyframes v3-td-jump-in {
from { opacity: 0; transform: translate(-50%, 6px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.v3-td-thread .thread-scroll {
flex: 1; overflow-y: auto;
padding: 18px 22px;
display: flex; flex-direction: column; gap: 14px;
}
/* Chat layout: avatar + bubble in a 2-col grid. For "mine" messages we
flip the columns (bubble left, avatar right) so the conversation reads
like a typical right-aligned chat. We assign grid-column EXPLICITLY
instead of using `order` — `order` interacts poorly with Grid auto-
placement when template-columns are asymmetric (1fr vs 32px), which
caused mine-bubbles to collapse to ~32px and stack text character-by-
character. */
.v3-td-thread .msg {
display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px;
align-items: flex-start;
}
.v3-td-thread .msg > .av { grid-column: 1; }
.v3-td-thread .msg > .bubble { grid-column: 2; }
.v3-td-thread .msg.mine { grid-template-columns: minmax(0, 1fr) 32px; }
.v3-td-thread .msg.mine > .av { grid-column: 2; }
.v3-td-thread .msg.mine > .bubble { grid-column: 1; text-align: left; }
.v3-td-thread .msg .av {
width: 32px; height: 32px; border-radius: 50%;
background: var(--teal-100); color: var(--teal-800);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11.5px; font-weight: 700;
}
.v3-td-thread .msg.mine .av { background: color-mix(in oklab, var(--teal-700) 14%, var(--teal-100)); }
.v3-td-thread .msg .bubble {
background: var(--teal-50);
border: 1px solid var(--teal-100);
border-radius: 12px;
padding: 10px 14px;
min-width: 0;
/* Cap bubble width so long replies don't stretch edge-to-edge — reads
more like a conversation, less like a form. justify-self below
anchors bubbles to the correct side of their grid cell. */
max-width: 75%;
justify-self: start;
}
.v3-td-thread .msg.mine > .bubble { justify-self: end; }
/* The opening post is a full-width callout, not a chat message. */
.v3-td-thread .msg.original > .bubble { max-width: 100%; justify-self: stretch; }
.v3-td-thread .msg.mine .bubble {
background: color-mix(in oklab, var(--teal-700) 6%, var(--surface));
border-color: color-mix(in oklab, var(--teal-700) 22%, var(--line));
}
.v3-td-thread .msg.original .bubble {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.v3-td-thread .msg .bubble header {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 11.5px; color: var(--ink-3);
margin-bottom: 4px;
}
.v3-td-thread .msg .bubble .who { font-weight: 600; color: var(--ink-2); }
.v3-td-thread .msg .bubble .tag {
background: var(--teal-100); color: var(--teal-800);
padding: 1px 7px; border-radius: 999px; font-size: 10px;
font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.v3-td-thread .msg .bubble .body {
font-size: 13.5px; color: var(--ink); line-height: 1.5;
word-wrap: break-word;
}
.v3-td-thread .msg .bubble .body p { margin: 0 0 8px; }
.v3-td-thread .msg .bubble .body p:last-child { margin-bottom: 0; }
.v3-td-thread .msg .bubble .body img { max-width: 100%; border-radius: 6px; }
/* Composer */
.v3-td-composer { padding: 12px 22px 16px; border-top: 1px solid var(--line); background: var(--teal-50); }
.v3-td-composer .v3-input { background: var(--surface); }
.v3-td-composer .composer-bar {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.v3-td-composer .composer-bar .hint { font-size: 11px; color: var(--ink-4); }
.v3-td-composer .composer-bar .spacer { flex: 1; }
.v3-td-closed {
display: flex; align-items: center; gap: 10px;
padding: 16px 22px;
border-top: 1px solid var(--line);
background: color-mix(in oklab, #22c55e 8%, var(--teal-50));
color: var(--ink-2); font-size: 13px;
}
/* Right rail */
.v3-td-side {
display: flex; flex-direction: column; min-height: 0;
overflow-y: auto;
background: color-mix(in oklab, var(--teal-50) 50%, var(--surface));
}
.v3-td-meta { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.v3-td-meta .kv {
display: grid; grid-template-columns: 92px 1fr; gap: 10px;
align-items: center;
padding: 7px 0; border-bottom: 1px dashed var(--line-soft);
}
.v3-td-meta .kv:last-child { border-bottom: 0; }
.v3-td-meta .kv .k { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.v3-td-meta .kv .v { font-size: 13px; color: var(--ink); }
.v3-td-meta .kv .v .muted { color: var(--ink-4); font-style: italic; }
.v3-td-timeline { padding: 14px 20px 18px; }
.v3-td-timeline h3 {
font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-3); font-weight: 700; margin: 0 0 10px;
}
.v3-td-timeline .tl { list-style: none; padding: 0 0 0 14px; margin: 0; position: relative; }
.v3-td-timeline .tl::before {
content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
width: 2px; background: var(--teal-100);
}
.v3-td-timeline .tl li { position: relative; padding: 0 0 10px 0; }
.v3-td-timeline .tl li .tl-dot {
position: absolute; left: -14px; top: 6px;
width: 10px; height: 10px; border-radius: 50%;
background: var(--surface); border: 2px solid var(--teal-700);
}
.v3-td-timeline .tl li .tl-text { font-size: 12.5px; color: var(--ink); }
.v3-td-timeline .tl li .tl-meta { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.v3-td-timeline .muted { color: var(--ink-4); font-size: 12px; font-style: italic; }