/*
Global Design Tokens
- Theme mode:
- Accent:
Notes
- We keep legacy vars (--c-*) for existing pages, but they map to tokens.
- Transitions are opt-in via to avoid flashes on first paint.
- The first navigation panel (P1) is intentionally "strong" to remain visible even when
it becomes retractable / icon-only later.
*/
/* Global UI scale: shrink everything slightly (90%) as requested.
Prefer CSS zoom (Chromium/Edge), with a transform fallback.
*/
body.app-scale-90{zoom:0.9;}
/* When using zoom on Chromium-based browsers, 100vh gets visually scaled.
Compensate so full-height layouts (sidebars) still reach the bottom. */
body.app-scale-90 .app{height:calc(100vh / 0.9);}
@supports not (zoom: 1){
/* Firefox fallback: scale with transform, but keep full-viewport layouts (100vh) visually filling the screen */
body.app-scale-90{
transform:scale(0.9);
transform-origin:top left;
width:calc(100% / 0.9);
min-height:calc(100vh / 0.9);
}
}
/* ------------------------------------------------------------------------
Short ID hover tooltip (0.75s)
Any element with [data-shortid] will show the associated name.
------------------------------------------------------------------------- */
.sidTip{
position:fixed;
z-index:9999;
padding:8px 10px;
border-radius:12px;
background:color-mix(in srgb, var(--bg-panel) 92%, #000 8%);
border:1px solid var(--border-soft);
color:var(--text-main);
font-size:12px;
box-shadow:0 16px 34px rgba(0,0,0,.18);
pointer-events:none;
max-width:min(360px, 90vw);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html[data-theme="dark"] .sidTip{ box-shadow:0 18px 42px rgba(0,0,0,.42); }
.shortId{ cursor:help; }
/* ------------------------------------------------------------------------
Full-screen loader (Solution A)
Used on: post-login home, admin home, env home.
------------------------------------------------------------------------- */
.fsLoader{
position:fixed;
inset:0;
z-index:100000;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(1200px 800px at 20% 20%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
radial-gradient(900px 700px at 80% 70%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 55%),
var(--bg-app);
color:var(--text-main);
}
.fsLoader.hidden{ display:none; }
.fsLoaderCard{
width:min(520px, 92vw);
padding:28px 26px;
border-radius:22px;
background:color-mix(in srgb, var(--bg-panel) 92%, transparent);
border:1px solid var(--border-soft);
box-shadow:0 18px 60px rgba(0,0,0,.12);
backdrop-filter: blur(10px);
}
html[data-theme="dark"] .fsLoaderCard{
box-shadow:0 22px 70px rgba(0,0,0,.46);
}
.fsLoaderTop{
display:flex;
align-items:center;
gap:14px;
}
.fsLoaderMark{
width:44px;
height:44px;
border-radius:16px;
display:grid;
place-items:center;
background:color-mix(in srgb, var(--primary) 16%, var(--bg-panel));
border:1px solid color-mix(in srgb, var(--primary) 26%, var(--border-soft));
}
.fsLoaderMark svg{ width:24px; height:24px; }
.fsLoaderTitle{
font-size:16px;
font-weight:650;
letter-spacing:.2px;
}
.fsLoaderSub{
margin-top:2px;
font-size:12px;
color:var(--text-muted);
}
.fsLoaderAnim{
margin-top:18px;
height:10px;
border-radius:999px;
background:color-mix(in srgb, var(--text-main) 8%, transparent);
overflow:hidden;
position:relative;
}
.fsLoaderAnim::before{
content:"";
position:absolute;
inset:0;
transform:translateX(-40%);
background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 55%, transparent), transparent);
animation:fsLoaderSweep 1.1s ease-in-out infinite;
}
@keyframes fsLoaderSweep{
0%{ transform:translateX(-60%); }
100%{ transform:translateX(60%); }
}
.fsLoaderDots{
margin-top:12px;
display:flex;
align-items:center;
gap:6px;
}
.fsDot{
width:7px;
height:7px;
border-radius:999px;
background:color-mix(in srgb, var(--primary) 65%, var(--text-main));
opacity:.18;
animation:fsDotPulse 1.1s infinite;
}
.fsDot:nth-child(2){ animation-delay:.15s; }
.fsDot:nth-child(3){ animation-delay:.3s; }
@keyframes fsDotPulse{
0%, 100%{ opacity:.18; transform:translateY(0); }
50%{ opacity:.9; transform:translateY(-2px); }
}
.fsLoaderStatus{
margin-top:10px;
font-size:12px;
color:var(--text-muted);
}
:root{
/* Accent defaults (Iris) */
--primary: #6D5EFc;
--primary-hover: #5B4FF0;
--primary-active: #4A3FE0;
--on-primary: #ffffff;
/* Accent derived */
--primary-soft-light: rgba(109,94,252,.14);
--primary-soft-dark: rgba(109,94,252,.22);
--primary-soft: var(--primary-soft-light);
--primary-surface-light: var(--primary);
--primary-surface-dark: var(--primary);
--primary-surface: var(--primary-surface-light);
--focus-ring: 0 0 0 3px rgba(109,94,252,.22);
/* Light tokens */
--bg-app: #f8fafc;
--bg-panel: #ffffff;
--bg-hover: #f1f5f9;
--bg-selected: rgba(15,23,42,.04);
--text-main: #0f172a;
--text-muted: #64748b;
--text-inverted: #ffffff;
--border-soft: #e2e8f0;
--border-strong: #cbd5e1;
--shadow-soft: 0 1px 2px rgba(0,0,0,.05);
/* Buttons (secondary surfaces) */
--btn-bg: var(--bg-panel);
--btn-hover: var(--bg-hover);
--btn-border: var(--border-soft);
/* Left navigation (sidebar) */
--bg-sidebar: #ffffff;
--bg-sidebar2: #ffffff;
--bg-sidebar3: #fbfbfe;
--text-sidebar: var(--text-main);
--text-sidebar-muted: var(--text-muted);
/* First navigation panel (strong accent) */
/*
First navigation panel (P1): should be strongly branded and remain visible
even when the sidebar becomes retractable/icon-only later.
We purposely use darker accent shades than the raw primary.
*/
/* Slightly darker in light mode so future icons pop more */
--nav-p1-bg-light: var(--primary-active);
--nav-p1-bg-dark: var(--primary-active);
--nav-p1-bg: var(--nav-p1-bg-light);
--nav-p1-text: #ffffff;
--nav-p1-border: rgba(255,255,255,.20);
/* Legacy aliases (compat) */
--c-black: var(--text-main);
--c-white: var(--bg-panel);
--c-g1: var(--bg-hover);
--c-g2: var(--border-soft);
--c-g3: var(--text-muted);
}
:root[data-theme="dark"]{
--bg-app: #0b1220;
--bg-panel: #111827;
--bg-hover: #1f2937;
--bg-selected: rgba(229,231,235,.06);
--text-main: #e5e7eb;
/* Slightly brighter muted text for better legibility in dark mode */
--text-muted: #b6beca;
--text-inverted: #0b1220;
--border-soft: #1f2937;
--border-strong: #374151;
--shadow-soft: 0 1px 2px rgba(0,0,0,.4);
/* Accent in dark */
--primary-soft: var(--primary-soft-dark);
--primary-surface: var(--primary-surface-dark);
--focus-ring: 0 0 0 3px rgba(255,255,255,.16);
/* Buttons in dark: lift them a bit for readability */
--btn-bg: #1f2937;
--btn-hover: #2b3647;
--btn-border: #374151;
/* Left navigation */
--bg-sidebar: #0b1220;
--bg-sidebar2: #0f172a;
--bg-sidebar3: #111c33;
--text-sidebar: #e5e7eb;
--text-sidebar-muted: #b7c0cd;
/* P1 stays strong and visible */
--nav-p1-bg: var(--nav-p1-bg-dark);
--nav-p1-border: rgba(255,255,255,.22);
/* Legacy aliases */
--c-black: var(--text-main);
--c-white: var(--bg-panel);
--c-g1: var(--bg-hover);
--c-g2: var(--border-soft);
--c-g3: var(--text-muted);
}
/* Accent palette (modern) */
:root[data-accent="iris"]{ --primary:#6D5EFC; --primary-hover:#5B4FF0; --primary-active:#4A3FE0; --on-primary:#ffffff; --primary-soft-light:rgba(109,94,252,.14); --primary-soft-dark:rgba(109,94,252,.22); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(109,94,252,.24); }
:root[data-accent="sky"]{ --primary:#4F9CFB; --primary-hover:#3C86E6; --primary-active:#2D6ECC; --on-primary:#ffffff; --primary-soft-light:rgba(79,156,251,.14); --primary-soft-dark:rgba(79,156,251,.22); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(79,156,251,.24); }
:root[data-accent="mint"]{ --primary:#2CCFB0; --primary-hover:#24B79C; --primary-active:#1F9B84; --on-primary:#06131a; --primary-soft-light:rgba(44,207,176,.16); --primary-soft-dark:rgba(44,207,176,.26); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(44,207,176,.26); }
:root[data-accent="jade"]{ --primary:#0F9D6A; --primary-hover:#0B855A; --primary-active:#086D4A; --on-primary:#ffffff; --primary-soft-light:rgba(15,157,106,.16); --primary-soft-dark:rgba(15,157,106,.24); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(15,157,106,.26); }
:root[data-accent="amber"]{ --primary:#F2A94D; --primary-hover:#DE9437; --primary-active:#C97E22; --on-primary:#121212; --primary-soft-light:rgba(242,169,77,.20); --primary-soft-dark:rgba(242,169,77,.30); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(242,169,77,.28); }
:root[data-accent="coral"]{ --primary:#FF6B6B; --primary-hover:#E85A5A; --primary-active:#CF4A4A; --on-primary:#ffffff; --primary-soft-light:rgba(255,107,107,.18); --primary-soft-dark:rgba(255,107,107,.26); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(255,107,107,.26); }
:root[data-accent="rose"]{ --primary:#E56B93; --primary-hover:#CF587F; --primary-active:#B8466B; --on-primary:#ffffff; --primary-soft-light:rgba(229,107,147,.18); --primary-soft-dark:rgba(229,107,147,.26); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(229,107,147,.26); }
:root[data-accent="grape"]{ --primary:#6D28D9; --primary-hover:#5B21B6; --primary-active:#4C1D95; --on-primary:#ffffff; --primary-soft-light:rgba(109,40,217,.16); --primary-soft-dark:rgba(109,40,217,.24); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(109,40,217,.26); }
/* Extra accents (more variety + dark tones) */
:root[data-accent="cobalt"]{ --primary:#2F6BFF; --primary-hover:#265BE0; --primary-active:#1E4CC2; --on-primary:#ffffff; --primary-soft-light:rgba(47,107,255,.14); --primary-soft-dark:rgba(47,107,255,.22); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(47,107,255,.24); }
:root[data-accent="teal"]{ --primary:#14B8A6; --primary-hover:#0FA08F; --primary-active:#0B8476; --on-primary:#06131a; --primary-soft-light:rgba(20,184,166,.16); --primary-soft-dark:rgba(20,184,166,.26); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(20,184,166,.26); }
:root[data-accent="lime"]{ --primary:#A3E635; --primary-hover:#8FCC2A; --primary-active:#78B620; --on-primary:#10120a; --primary-soft-light:rgba(163,230,53,.20); --primary-soft-dark:rgba(163,230,53,.30); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(163,230,53,.26); }
:root[data-accent="sand"]{ --primary:#D6B98C; --primary-hover:#C5A977; --primary-active:#B29561; --on-primary:#141414; --primary-soft-light:rgba(214,185,140,.22); --primary-soft-dark:rgba(214,185,140,.30); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(214,185,140,.28); }
:root[data-accent="slate"]{ --primary:#475569; --primary-hover:#3B4758; --primary-active:#2F3947; --on-primary:#ffffff; --primary-soft-light:rgba(71,85,105,.16); --primary-soft-dark:rgba(71,85,105,.26); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(71,85,105,.26); }
:root[data-accent="navy"]{ --primary:#0B3A5A; --primary-hover:#082F4B; --primary-active:#06263D; --on-primary:#ffffff; --primary-soft-light:rgba(11,58,90,.14); --primary-soft-dark:rgba(11,58,90,.22); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(11,58,90,.26); }
:root[data-accent="graphite"]{ --primary:#141414; --primary-hover:#0F0F0F; --primary-active:#0A0A0A; --on-primary:#ffffff; --primary-soft-light:rgba(20,20,20,.10); --primary-soft-dark:rgba(255,255,255,.10); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(20,20,20,.22); }
:root[data-accent="black"]{ --primary:#000000; --primary-hover:#0A0A0A; --primary-active:#141414; --on-primary:#ffffff; --primary-soft-light:rgba(0,0,0,.10); --primary-soft-dark:rgba(255,255,255,.10); --primary-surface-light:var(--primary); --primary-surface-dark:var(--primary); --focus-ring:0 0 0 3px rgba(0,0,0,.22); }
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Arial,sans-serif;}
html,body{height:100%;}
body{margin:0;background:var(--bg-app);color:var(--text-main);}
a{color:inherit}
input,button{font:inherit}
html.theme-animate *{
transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease;
}
/* Tabs bar (admin pages) */
.tabs-bar{
display:flex;
gap:6px;
align-items:center;
padding:6px;
border:1px solid var(--border-soft);
border-radius:14px;
background: var(--bg-hover);
box-shadow: var(--shadow-soft);
}
/* Avoid showing an empty "pill" under titles on pages without tabs. */
.tabs-bar:empty{display:none;}
.tab-btn{
background:transparent;
border:1px solid transparent;
color:inherit;
padding:8px 12px;
border-radius:12px;
cursor:pointer;
font-size:13px;
font-weight:600;
letter-spacing:0.1px;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.tab-btn:hover{
background: var(--bg-selected);
border-color: var(--border-soft);
}
.tab-btn:active{
transform: translateY(1px);
}
.tab-btn.active{
background: var(--primary-soft);
border-color: rgba(0,0,0,.08);
color: var(--text-main);
box-shadow: var(--shadow-soft);
}
/* Optional action button inside tabs bar */
.tab-reset-btn{
margin-left:auto;
padding:8px 12px;
border-radius:12px;
border:1px solid var(--border-soft);
background: var(--bg-panel);
color:inherit;
cursor:pointer;
font-size:12px;
font-weight:600;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.tab-reset-btn:hover{ background: var(--bg-hover); border-color: var(--border-strong); }
.tab-reset-btn:active{ transform: translateY(1px); }
/* Active filters bar (tables) */
.activeFiltersBar{
display:none;
align-items:center;
gap:8px;
flex-wrap:wrap;
padding:10px 12px;
border:1px solid var(--c-g2);
border-radius:12px;
background: var(--c-white);
box-shadow:0 1px 0 rgba(0,0,0,.05);
margin:10px 0;
}
.afLabel{ font-size:12px; color:var(--c-g3); font-weight:600; }
.afPill{
display:inline-flex;
align-items:center;
gap:8px;
padding:6px 10px;
border:1px solid var(--c-g2);
background: var(--c-g1);
border-radius:999px;
font-size:12px;
}
.afX{
width:18px;
height:18px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--c-g2);
border-radius:999px;
background: var(--c-white);
cursor:pointer;
line-height:1;
}
.afActions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.btnSoft{
padding:8px 10px;
border:1px solid color-mix(in srgb, var(--primary) 28%, var(--border-soft));
background: color-mix(in srgb, var(--primary-soft) 75%, var(--bg-panel));
color: var(--text-main);
cursor:pointer;
border-radius:10px;
font-size:12px;
font-weight:700;
box-shadow: var(--shadow-soft);
}
.btnSoft:hover{
background: color-mix(in srgb, var(--primary-soft) 88%, var(--bg-hover));
border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
}
.btnSoft:active{ transform: translateY(1px); }
.btnSoft:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; }
.btnSoft.isActive{
border-color: color-mix(in srgb, var(--primary) 55%, var(--border-strong));
background: color-mix(in srgb, var(--primary-soft) 92%, var(--bg-hover));
}
/* Pager (users table) */
.pager{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:8px 10px;
margin:10px 0;
border:1px solid rgba(0,0,0,0.08);
background:rgba(255,255,255,0.75);
backdrop-filter:saturate(1.2) blur(6px);
border-radius:12px;
}
.pagerLeft, .pagerRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.btnSm{
padding:6px 10px;
border-radius:10px;
border:1px solid rgba(0,0,0,0.18);
background:white;
cursor:pointer;
}
.btnSm:disabled{opacity:0.5;cursor:not-allowed}
.selSm{
padding:6px 8px;
border-radius:10px;
border:1px solid rgba(0,0,0,0.18);
background: var(--bg-panel);
color: var(--text-main);
}
/* Data viewer (table preview) */
.dsDVTop{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.dsDVTitle{font-weight:900;}
.dsDVControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.dsDVModeBtns{display:flex;gap:6px;align-items:center;}
.dsDVColMenu{position:fixed;z-index:999999;background:var(--bg-panel);border:1px solid var(--border-soft);box-shadow:var(--shadow-strong);border-radius:14px;padding:10px;min-width:320px;}
.dsDVColMenuHdr{font-weight:900;margin-bottom:8px;}
.dsDVColMenuRow{display:flex;gap:8px;align-items:center;justify-content:flex-start;margin-bottom:10px;flex-wrap:wrap;}
/* Multi-select dropdown (CRUD modal) */
.multiSelect{position:relative;}
.multiSelectSummary{
list-style:none;
cursor:pointer;
padding:8px 10px;
border-radius:12px;
border:1px solid var(--border-soft);
background: var(--bg-panel);
color: var(--text-main);
user-select:none;
}
.multiSelectSummary::-webkit-details-marker{display:none;}
.multiSelectPanel{
margin-top:6px;
border:1px solid var(--border-soft);
background: var(--bg-panel);
border-radius:12px;
box-shadow: var(--shadow-soft);
padding:8px;
max-height:260px;
overflow:auto;
}
.multiSelectToolbar{display:flex;gap:8px;margin-bottom:8px;}
.btnXs{
padding:6px 10px;
border-radius:10px;
border:1px solid var(--border-soft);
background: var(--bg-hover);
color: var(--text-main);
cursor:pointer;
}
.btnXs:hover{background: var(--bg-hover-strong, var(--bg-hover)); border-color: var(--border-strong);}
.multiSelectList{display:flex;flex-direction:column;gap:6px;}
.multiSelectRow{display:flex;align-items:center;gap:8px;cursor:pointer;color: var(--text-main);}
.multiSelectRow input{accent-color: var(--accent);}
/* Pager – dark mode harmonisation (évite la barre trop claire) */
:root[data-theme="dark"] .pager{
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-hover) 82%, var(--bg-panel));
backdrop-filter:saturate(1.4) blur(10px);
box-shadow: var(--shadow-soft);
}
:root[data-theme="dark"] .btnSm,
:root[data-theme="dark"] .selSm{
border:1px solid var(--border-soft);
background: var(--bg-panel);
color: var(--text-main);
}
:root[data-theme="dark"] .btnSm:hover{
background: var(--bg-hover);
border-color: var(--border-strong);
}
/* JS error banner (injected by error_guard.js) */
.js-error-banner{
position:fixed;
left:12px;
right:12px;
bottom:12px;
z-index:9999;
display:none;
padding:10px 12px;
border-radius:12px;
background:rgba(176,0,32,0.95);
color:#fff;
font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.js-error-banner.is-visible{display:block;}
/* Theme controls (navbar) */
.themeControls{display:flex;align-items:center;gap:10px;}
.themeToggle{
width:42px;height:22px;border-radius:999px;
border:1px solid var(--border-soft);
background: var(--bg-hover);
position:relative;cursor:pointer;
padding:0;
}
.themeToggle:focus{outline:none;box-shadow: var(--focus-ring);}
.themeToggleThumb{
position:absolute;top:1px;left:1px;
width:18px;height:18px;border-radius:999px;
background: var(--bg-panel);
box-shadow: var(--shadow-soft);
transform: translateX(0);
transition: transform 200ms ease;
}
:root[data-theme="dark"] .themeToggleThumb{ transform: translateX(20px); }
.themeToggleIcon{
position:absolute;top:50%;transform:translateY(-50%);
font-size:12px;line-height:1;
color: var(--text-muted);
user-select:none;
}
.themeToggleIcon.moon{left:5px;}
.themeToggleIcon.sun{right:5px;}
.accentWrap{position:relative;}
.accentBtn{
height:32px;
padding:0 10px;
border-radius:10px;
border:1px solid var(--border-soft);
background: var(--bg-panel);
cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
}
.accentBtn:focus{outline:none;box-shadow: var(--focus-ring);}
.accentDot{width:20px;height:20px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 1px rgba(0,0,0,.12) inset, 0 2px 8px rgba(0,0,0,.08);}
.accentChevron{font-size:10px;color:var(--text-muted);}
.accentMenu{
position:absolute;top:calc(100% + 8px);right:0;
background: var(--bg-panel);
border:1px solid var(--border-soft);
border-radius:12px;
box-shadow: 0 12px 28px rgba(0,0,0,.12);
padding:10px;
display:none;
z-index:999;
min-width:220px;
}
:root[data-theme="dark"] .accentMenu{ box-shadow: 0 16px 34px rgba(0,0,0,.45); }
.accentMenu.open{display:block;}
.accentGrid{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;}
.accentChoice{
width:20px;height:20px;border-radius:999px;
border:1px solid var(--border-soft);
cursor:pointer;
position:relative;
}
.accentChoice:hover{transform:scale(1.05)}
.accentChoice.selected{outline:2px solid var(--primary);outline-offset:3px;}
:root[data-theme="dark"] .accentDot{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 8px 18px rgba(0,0,0,.35);}
:root[data-theme="dark"] .accentChoice{border-color: rgba(255,255,255,.16);}
:root[data-theme="dark"] .accentChoice.selected{outline-color: rgba(255,255,255,.85);}
/* Tooltip (used for collapsed sidebar icons) */
.uiTooltip{
position:fixed;
z-index:9999;
padding:8px 10px;
border-radius:12px;
background: var(--bg-panel);
color: var(--text-main);
box-shadow: 0 14px 34px rgba(0,0,0,.18);
font-size:13px;
font-weight:650;
pointer-events:none;
opacity:0;
transform: translateY(2px);
transition: opacity 120ms ease, transform 120ms ease;
}
:root[data-theme="dark"] .uiTooltip{ box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.uiTooltip.show{ opacity:1; transform: translateY(0); }
/* Modal (Create/Edit/Delete confirmations) */
.modalOverlay{
position:fixed;
inset:0;
background: color-mix(in srgb, var(--bg-app) 30%, transparent);
backdrop-filter: blur(10px) saturate(1.3);
display:flex;
align-items:center;
justify-content:center;
padding:18px;
z-index:300;
}
/* Some confirmations must stay above everything else (e.g., destructive type switch) */
.modalOverlay.modalOverlayTop{ z-index: 100000; }
/* In-card overlay (used by the dataset conceptor in Env page) */
.modalOverlay.inCard{
position:absolute;
inset:0;
padding:0;
align-items:stretch;
justify-content:stretch;
/* Must stay below any popovers coming from the navbar or the left menu */
z-index:180;
}
.modalOverlay.inCard .modalCard{
width:100%;
height:100%;
max-height:none;
border-radius:14px;
}
.datasetConceptorHeader .datasetConceptorTitle{
font-size:14px;
font-weight:900;
letter-spacing:.2px;
}
.datasetConceptorHeader{justify-content:flex-start;}
.datasetConceptorHeader .datasetConceptorTitle{flex:0 0 auto;white-space:nowrap;}
.datasetConceptorHeader .dsTimeline{flex:1 1 auto;padding:0 8px;border-bottom:none;flex-wrap:nowrap;justify-content:center;overflow:hidden;}
.datasetConceptorHeader .dsStep{box-shadow:none;padding:7px 10px;}
.datasetConceptorHeader .dsStepLabel{max-width:160px;}
/* Dataset Conceptor modal: ensure the central work area stretches to the bottom.
Without a fixed-height flex card, the work area stops early and the horizontal
scrollbar appears mid-panel instead of at the very bottom.
*/
.modalCard.datasetConceptorCard{
width: min(98vw, calc(100vw - 24px));
height: min(92vh, calc(100vh - 36px));
max-height: none;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modalBody.datasetConceptorBody{
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
/* Timeline (modern steps bar) */
.dsTimeline{
display:flex;
align-items:center;
gap:6px;
padding:6px 4px 14px;
border-bottom:1px solid var(--border-soft);
flex-wrap:wrap;
}
.dsStep{
display:flex;
align-items:center;
gap:10px;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
color: var(--text-main);
border-radius:999px;
padding:8px 12px;
cursor:pointer;
font-size:12px;
font-weight:800;
box-shadow: var(--shadow-soft);
}
.dsStep:hover{background:var(--bg-hover);}
.dsStep.active{
border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong));
background: color-mix(in srgb, var(--primary-soft) 78%, var(--bg-panel));
}
.dsStepDot{
width:22px;
height:22px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-app) 35%, var(--bg-panel));
font-size:12px;
font-weight:900;
}
.dsStep.active .dsStepDot{
border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong));
background: color-mix(in srgb, var(--primary) 25%, var(--bg-panel));
}
.dsStepLabel{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dsStepLine{
flex:1 1 26px;
height:2px;
background: color-mix(in srgb, var(--border-soft) 70%, transparent);
border-radius:999px;
}
/* Datastep modal – timeline tabs */
.dsAlvCfgStageTimeline{padding:6px 0 12px;border-bottom:1px solid var(--border-soft);flex-wrap:nowrap;justify-content:flex-start;overflow:auto;}
.dsAlvCfgStageTimeline .dsStep{padding:7px 10px;box-shadow:none;}
.dsAlvCfgStageTimeline .dsStepLabel{max-width:220px;}
.datasetConceptorBody{display:flex;flex-direction:column;min-height:0;}
.dsStepContent{padding-top:2px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.dsStepWorkArea{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.dsStepTitle{font-size:14px;font-weight:900;margin-bottom:6px;}
.dsStepPlaceholder{
margin-top:12px;
padding:12px;
border:1px dashed var(--border-soft);
border-radius:14px;
background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
color: var(--text-muted);
font-size:13px;
}
/* Dataset Conceptor – Sequence workbench */
.dsEmptyHint{
padding:14px;
border:1px dashed var(--border-soft);
border-radius:14px;
background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
color: var(--text-muted);
font-size:13px;
}
.dsSeqWorkbench{display:flex;flex-direction:column;gap:14px;padding:0 4px 18px;flex:1 1 auto;min-height:0;}
.dsWorkTopBar{display:flex;justify-content:flex-start;align-items:center;padding:0 12px;}
.dsWorkTopBar .btnPrimary{box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 18%, transparent);}
/* Visible but subtle grid for the central work area (drag & drop positioning). */
.dsWorkGrid{
position:relative;
display:grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
/* Increase spacing BETWEEN COLUMNS only (requested), keep row spacing unchanged */
row-gap:14px;
column-gap:21px; /* +50% vs 14px */
padding:12px;
width:100%;
align-content:start;
flex:1 1 auto;
min-height:100%;
border-radius:18px;
border:1px dashed color-mix(in srgb, var(--border-soft) 85%, transparent);
background-image:
linear-gradient(to right, color-mix(in srgb, var(--border-soft) 46%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--border-soft) 46%, transparent) 1px, transparent 1px);
background-size: 24px 24px;
background-position: -1px -1px;
overflow:hidden;
}
.dsWorkGrid.empty{opacity:.95;}
.dsWorkItem{display:flex;justify-content:center;}
.dsWorkItem[draggable="true"]{cursor:grab;}
.dsWorkItem.dragging{opacity:.55;}
.dsWorkItem.dropTarget{outline:2px solid color-mix(in srgb, var(--primary) 35%, transparent);outline-offset:4px;border-radius:14px;}
.dsAlveoleRow{
/* One line of couples (datastep + output table). Designed to fit ~15 couples on large screens. */
display:grid;
grid-template-columns: repeat(15, max-content);
gap:14px;
align-items:start;
justify-content:flex-start;
overflow-x:auto;
padding-bottom:6px;
}
/* No visual margin between icons; the link sits directly between them. */
.dsAlvCouple{display:flex;align-items:flex-start;gap:0;}
.dsAlvCol{display:flex;flex-direction:column;align-items:center;gap:6px;}
.dsAlvLink{
flex:1 1 auto;
height:2px;
/* Align link to the vertical center of the icons (ignore labels under icons) */
margin-top:21px; /* (44px icon container - 2px link)/2 */
border-radius:999px;
background: color-mix(in srgb, var(--border-soft) 75%, transparent);
}
/* Data sources tree helpers */
.dsTreeTools{display:flex;gap:10px;margin:12px 0;}
/* Spacer kept for backward-compat but unused now */
.dsTreeToolsSpacer{height:0;}
.dsTreeBtn{flex:1 1 0;}
.dsTreeBtnIcon{flex:0 0 auto;}
.dsTreeRow.match{background: color-mix(in srgb, var(--primary) 10%, transparent);}
.dsAlveole{
position:relative;
width:44px;
height:44px;
cursor: pointer;
user-select:none;
/* Same outer button as result-table icon; the hex "alveole" is inside */
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
box-shadow: var(--shadow-soft);
overflow:visible;
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease;
}
.dsAlveole.isHover{transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 34px rgba(0,0,0,.12); filter: saturate(1.06);}
.dsAlveole.isDown{transform: translateY(0) scale(.995); box-shadow: 0 12px 22px rgba(0,0,0,.10);}
.dsAlveole.isPreview{cursor:default; transform:none!important;}
.dsAlveoleIcon{
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
}
.dsAlveoleIcon svg{width:22px;height:22px;opacity:.86;}
.dsAlveoleIdx{
position:absolute;
top:-8px;
left:-8px;
font-size:11px;
font-weight:900;
color: color-mix(in srgb, var(--text-muted) 75%, var(--text-main));
background: color-mix(in srgb, var(--bg-app) 22%, transparent);
border:1px solid color-mix(in srgb, var(--border-soft) 85%, transparent);
border-radius:999px;
padding:2px 8px;
backdrop-filter: blur(6px);
}
.dsAlveoleBody{display:none;}
.dsAlvName, .dsOutName{
max-width: 72px;
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align:center;
}
.dsAlveoleOut{display:flex;flex-direction:column;align-items:center;gap:6px;}
.dsAlveoleOutIcon{
width:44px;
height:44px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
box-shadow: var(--shadow-soft);
cursor:pointer;
transition: transform .14s ease, box-shadow .14s ease, filter .14s ease, background .14s ease;
}
.dsAlveoleOutIcon svg{width:18px;height:18px;opacity:.85;}
.dsAlveoleOutIcon:hover{transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 34px rgba(0,0,0,.12); filter: saturate(1.06);}
.dsAlveoleOutIcon:active{transform: translateY(0) scale(.995); box-shadow: 0 12px 22px rgba(0,0,0,.10);}
/* Alveole configuration modal */
.dsAlveoleConfigOverlay{z-index: 99999;}
.dsAlveoleConfigCard{
display:flex;
flex-direction:column;
overflow:hidden;
}
.dsAlveoleConfigHeader{gap:14px;align-items:flex-start;position:relative;padding-top:18px;}
.dsAlveoleConfigHeader .modalHeaderBtns{
position:absolute;
top:18px;
right:18px;
}
.dsAlvCfgFields{display:flex;flex-direction:column;gap:12px;flex:1 1 auto;align-items:stretch;padding-right:220px;}
.dsAlvCfgField{display:flex;flex-direction:column;gap:6px;}
.dsAlvCfgLabel{font-size:11px;color:var(--text-muted);font-weight:800;}
.dsAlvCfgHint{font-size:11px;color:var(--text-muted);opacity:.9;}
.dsAlvCfgTabs{margin-top:6px;}
.dsAlvCfgPreview{display:flex;justify-content:center;align-items:center;padding:26px;}
.dsAlveoleConfigBody{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;}
/* Space below the sub-tabs bar (requested) */
.dsAlvCfgSubTabs{margin-bottom:14px;}
/* Datastep modal: stage body layout */
.dsAlvCfgStageBody{min-height:0;flex:1 1 auto;}
.dsAlvStageSplit{display:flex;gap:14px;min-height:0;height:100%;}
.dsAlvStageLeft{flex:0 0 390px;min-width:320px;max-width:440px;min-height:0;overflow:auto;}
.dsAlvStageRight{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding-right:6px;}
.dsAlvSelHeader{padding:2px 0 10px;}
.dsAlvSelTitle{font-size:13px;font-weight:900;}
.dsAlvSelSub{margin-top:2px;font-size:11px;color:var(--text-muted);}
.dsAlvSelList{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.dsAlvSelRow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--border-soft);border-radius:14px;background: color-mix(in srgb, var(--bg-panel) 92%, transparent);box-shadow: var(--shadow-soft);padding:10px 10px;}
.dsAlvSelMain{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dsAlvSelNameRow{display:flex;align-items:center;gap:8px;min-width:0;}
.dsAlvSelGrip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:10px;border:1px solid var(--border-soft);background: color-mix(in srgb, var(--bg-app) 25%, var(--bg-panel));color:var(--text-muted);cursor:grab;flex:0 0 auto;}
.dsAlvSelGrip:hover{background:var(--bg-hover);color:var(--text-main);}
.dsAlvSelGrip svg{width:14px;height:14px;}
.dsAlvSelName{font-size:12px;font-weight:900;}
.dsAlvSelMeta{margin-top:2px;font-size:11px;color:var(--text-muted);}
.dsAlvSelRemove{padding:8px 10px;border-radius:12px;}
.dsAlvSelRemove svg{width:14px;height:14px;}
/* Drag & drop visual hints for selected tables */
.dsAlvSelRow[draggable="true"]{cursor:grab;}
.dsAlvSelRow.dragging{opacity:.55;}
.dsAlvSelRow.dropAbove{box-shadow: 0 -2px 0 0 color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow-soft);}
.dsAlvSelRow.dropBelow{box-shadow: 0 2px 0 0 color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow-soft);}
.dsAlvStagePlaceholder{padding:14px 2px;}
.dsAlvStagePhTitle{font-size:13px;font-weight:900;margin-bottom:6px;}
/* Modern input look for the alveole config */
.dsAlvCfgInput{
border-radius:14px;
padding:10px 12px;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-app) 20%, var(--bg-panel));
box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.dsAlvCfgInput:focus{
outline:none;
border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.dsResultTables{display:flex;flex-direction:column;gap:12px;}
.dsResultTableCard{
border:1px solid var(--border-soft);
border-radius:16px;
background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
box-shadow: var(--shadow-soft);
padding:12px;
}
.dsResultTableHeader{font-size:13px;font-weight:900;}
.dsResultTableSub{margin-top:2px;color:var(--text-muted);font-size:12px;}
.dsEmptyTableWrap{margin-top:10px;overflow:auto;border-radius:12px;border:1px solid var(--border-soft);}
.dsEmptyTable{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;}
.dsEmptyTable thead th{
text-align:left;
padding:10px 10px;
border-bottom:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-app) 28%, var(--bg-panel));
color: var(--text-muted);
font-weight:900;
}
.dsEmptyTable tbody td{padding:12px 10px;color:var(--text-muted);}
.modalCard{
width:min(720px, calc(100vw - 24px));
max-height: calc(100vh - 36px);
overflow:auto;
border-radius:18px;
border:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
box-shadow:0 24px 60px rgba(0,0,0,.35);
}
/* Specific modals may request extra vertical space (e.g. mapping screens) */
.modalCardTall{
height: min(88vh, 980px);
}
/* Datastep (alvéole) configuration modal must take most of the viewport */
.modalCard.dsAlveoleConfigCard{
width: min(95vw, calc(100vw - 36px));
height: min(90vh, calc(100vh - 36px));
max-height: none;
overflow: hidden;
}
.modalHeader{
position:sticky;
top:0;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-bottom:1px solid var(--border-soft);
background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
backdrop-filter: blur(10px) saturate(1.3);
}
.modalTitle{font-size:14px;font-weight:900;letter-spacing:.2px;}
.modalHeaderBtns{display:flex;gap:8px;align-items:center;}
.btnPrimary{
padding:9px 12px;
border-radius:12px;
border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border-strong));
background: var(--primary);
color: var(--on-primary);
cursor:pointer;
font-size:12px;
font-weight:800;
box-shadow: var(--shadow-soft);
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}
.btnPrimary:hover{background: var(--primary-hover);}
.btnPrimary:active{transform: translateY(1px);}
.btnPrimary:disabled{opacity:.45;cursor:not-allowed;}
.btnDanger{
padding:9px 12px;
border-radius:12px;
border:1px solid color-mix(in srgb, #ef4444 35%, var(--border-strong));
background: color-mix(in srgb, #ef4444 76%, var(--bg-panel));
color: var(--text-main);
cursor:pointer;
font-size:12px;
font-weight:850;
}
:root[data-theme="dark"] .btnDanger{background: color-mix(in srgb, #ef4444 52%, var(--bg-panel)); color: var(--text-main);}
.btnDanger:hover{background: color-mix(in srgb, #ef4444 84%, var(--bg-hover));}
.btnDanger:disabled{opacity:.45;cursor:not-allowed;}
.btnSave{
/* Reserve space for success checkmark without moving text */
min-width: 120px;
}
.btnSave .saveLabel{display:inline-flex;align-items:center;gap:8px;}
.btnSave .saveIconSlot{width:18px;display:inline-flex;align-items:center;justify-content:center;opacity:0;}
.btnSave.saved .saveIconSlot{opacity:1;}
.btnSave .saveIconSlot svg{width:16px;height:16px;}
.modalBody{padding:14px 16px;}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:720px){.formGrid{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;color:var(--text-muted);font-weight:750;}
.field input,.field select,.field textarea{
padding:10px 12px;
border-radius:12px;
border:1px solid var(--border-soft);
background: var(--bg-panel);
color: var(--text-main);
outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:var(--focus-ring);background:var(--bg-hover);}
.fieldRow{grid-column:1 / -1;}
.mutedHelp{font-size:12px;color:var(--text-muted);}
.confirmList{margin:10px 0 0 0;padding-left:18px;}
.confirmList li{margin:4px 0;color:var(--text-main);}
/* Table selection column */
.thSelect, .tdSelect{width:44px;min-width:44px;max-width:44px;text-align:center;}
.rowCheck{width:16px;height:16px;cursor:pointer;}
/* Toolbar action group */
.toolActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
/* Save button checkmark (reserved space; no layout shift) */
.saveBtn{display:inline-flex;align-items:center;gap:10px;}
.saveBtn .saveCheck{
display:inline-block;
min-width:16px;
text-align:center;
opacity:0;
transform:scale(.8);
transition:opacity 120ms ease, transform 120ms ease;
/* Must stay readable on the primary button in every theme */
color: var(--on-primary);
text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.saveBtn.saved .saveCheck{opacity:1;transform:scale(1);}
/* Message modal (used for validation/errors instead of native alerts) */
.messageModal{width:min(520px, calc(100vw - 24px));}
.messageBody{padding-top:12px;}
.messageText{font-size:12px;color:var(--text-main);font-weight:700;margin-bottom:10px;}
.messageList{margin:0;padding-left:18px;}
.messageList li{margin:6px 0;color:var(--text-main);}
.tone-error .modalTitle{color: color-mix(in srgb, #ef4444 70%, var(--text-main));}
.tone-warning .modalTitle{color: color-mix(in srgb, #f59e0b 70%, var(--text-main));}
.tone-success .modalTitle{color: color-mix(in srgb, #22c55e 70%, var(--text-main));}
/* Datastep: Join editor (stage 2) */
.dsJoinStage{display:flex;flex-direction:column;gap:14px;padding:6px 0;}
.dsJoinTopTitle{font-weight:800;margin-bottom:6px;}
.dsJoinTables{display:flex;flex-direction:column;gap:10px;}
.dsJoinTableRow{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);}
.dsJoinTableLeft{min-width:220px}
.dsJoinTableName{font-weight:850;}
.dsJoinTableMeta{font-size:12px;color:var(--muted);margin-top:2px;}
.dsJoinFields{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dsJoinFieldChip{display:inline-flex;align-items:center;max-width:180px;padding:4px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsJoinMiniTable{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:var(--bg-panel)}
.dsJoinMiniTable thead th{position:sticky;top:0;background:var(--bg-soft);font-size:12px;text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.dsJoinMiniTable tbody td{padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.dsJoinMiniTable tbody tr:last-child td{border-bottom:none}
.dsJoinMiniTable tbody td:last-child{color:var(--text-muted);font-size:12px;white-space:nowrap}
.dsJoinSelect{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;background-size:6px 6px, 6px 6px;background-repeat:no-repeat;padding-right:34px}
.dsJoinSelect:focus{outline:none;box-shadow:0 0 0 3px rgba(84,190,175,.18)}
.dsJoinBottom{display:flex;flex-direction:column;gap:10px;}
.dsJoinActions{display:flex;gap:10px;align-items:center}
.dsJoinForm{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;gap:10px;padding:12px;border:1px dashed var(--line);border-radius:14px;background:var(--panel2);}
.dsJoinField{display:flex;flex-direction:column;gap:6px;min-width:0}
.dsJoinLbl{font-size:12px;color:var(--muted);font-weight:700}
.dsJoinSelect{width:100%}
.dsJoinFormBtns{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.dsJoinGroupTitle{font-weight:900;margin:12px 0 6px 0;}
.dsJoinTable{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dsJoinTable th,.dsJoinTable td{padding:10px 10px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
.dsJoinTable th{background:var(--panel2);text-align:left;font-weight:900;font-size:12px;color:var(--muted)}
.dsJoinTable tr:last-child td{border-bottom:none}
.dsJoinMiniSel{height:34px;padding:6px 10px}
.dsJoinIconBtn{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-left:6px}
.dsStep.disabled{opacity:.45;pointer-events:none}
/* --- WORK status mini badge (FULL / SAMPLE / ABSENT) --- */
.dsV2MiniBadge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:900;letter-spacing:.3px;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--text-muted);backdrop-filter:blur(6px);}
.dsV2MiniBadge.full{background:rgba(84,190,175,.16);border-color:rgba(84,190,175,.35);color:#137a6c;}
.dsV2MiniBadge.sample{background:rgba(120,150,255,.14);border-color:rgba(120,150,255,.35);color:#2d4fb0;}
.dsV2MiniBadge.absent{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:var(--text-muted);}